用elementplus编写样式好看的客房入住记录vue

首先需要安装 Element Plus 和 Vue.js。可以使用以下命令进行安装：

npm install element-plus vue

接着，在你的 Vue 组件中引入 Element Plus：

import { ElTable, ElTableColumn, ElButton } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElButton
  },
  // ...
};

然后在模板中使用 Element Plus 组件来渲染客房入住记录表格：

<template>
  <div>
    <el-table :data="records" style="width: 100%">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="房间号" prop="room"></el-table-column>
      <el-table-column label="入住时间" prop="checkInTime"></el-table-column>
      <el-table-column label="离店时间" prop="checkOutTime"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

在上面的代码中，我们使用了 `ElTable`、`ElTableColumn` 和 `ElButton` 组件来渲染表格和操作按钮。在 `ElTable` 组件中，我们通过 `:data` 属性绑定客房入住记录数据。在每一列中，我们通过 `label` 属性设置列名，`prop` 属性指定对应数据项的属性名。在最后一列中，我们使用了插槽来自定义操作列的内容，并通过 `row` 参数获取当前行的数据对象，从而实现编辑和删除操作。

最后，在 Vue 组件中添加相应的处理函数即可：

export default {
  // ...
  methods: {
    handleEdit(row) {
      // 编辑客房入住记录
    },
    handleDelete(row) {
      // 删除客房入住记录
    }
  }
};

以上就是使用 Element Plus 编写客房入住记录表格的基本步骤。你可以根据自己的需求，进一步定制样式和功能。