官方网址：https://element-plus.org/zh-CN/component/table.html

1. 安装 Element Plus
   npm install element-plus --save

2. 引入 Element Plus
   在 main.js 或 main.ts 文件中引入 Element Plus：

import ElementPlus from ‘element-plus’;
import ‘element-plus/dist/index.css’;
app.use(ElementPlus);

3.使用 el-table 组件
自定义列,例如添加操作按钮



4. 编辑功能
允许用户直接在表格中编辑数据：

<template>   <div class="container"><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"><template #default="scope"><el-input v-if="scope.row._edit" v-model="scope.row.date" /><span v-else>{{ scope.row.date }}</span></template></el-table-column><el-table-column prop="name" label="姓名" width="180"><template #default="scope"><el-input v-if="scope.row._edit" v-model="scope.row.name" /><span v-else>{{ scope.row.name }}</span></template></el-table-column><el-table-column prop="address" label="地址"><template #default="scope"><el-input v-if="scope.row._edit" v-model="scope.row.address" /><span v-else>{{ scope.row.address }}</span></template></el-table-column><el-table-column label="操作" width="180"><template #default="scope"><div v-if="scope.row._edit"><el-button type="primary" @click="handleSave(scope)">保存</el-button><el-button @click="handleCancel(scope)">取消</el-button></div><el-button v-else type="primary" @click="handleEdit(scope)">编辑</el-button></template></el-table-column></el-table>   </div> </template><script setup> import { ref } from 'vue';const tableData = ref([   {date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',_edit: false,   },   {date: '2016-05-04',name: '李四',address: '上海市普陀区金沙江路 1517 弄',_edit: false,   },   {date: '2016-05-01',name: '王五',address: '上海市普陀区金沙江路 1519 弄',_edit: false,   },   {date: '2016-05-03',name: '赵六',address: '上海市普陀区金沙江路 1516 弄',_edit: false,   }, ]);const handleEdit = (scope) => {   scope.row._edit = true; };const handleSave = (scope) => {   scope.row._edit = false;  console.log('保存', scope.row); };const handleCancel = (scope) => {   scope.row._edit = false; };</script>

5.使用 el-pagination 组件
与el-table组合

<template><div class="container"><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="地址" /></el-table><el-pagination:current-page="currentPage":page-sizes="[10, 20, 50, 100]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template><script setup>
import { ref } from 'vue';const tableData = ref([// 初始数据
]);const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);const handleSizeChange = (newSize) => {pageSize.value = newSize;fetchTableData();
};const handleCurrentChange = (newPage) => {currentPage.value = newPage;fetchTableData();
};const fetchTableData = () => {// 模拟数据请求const start = (currentPage.value - 1) * pageSize.value;const end = start + pageSize.value;tableData.value = data.slice(start, end);
};const data = [// 你的完整数据{date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',},  {date: '2016-05-02',name: '张三',address: '上海市普陀区金沙江路 1518 弄',},{date: '2016-05-04',name: '李四',address: '上海市普陀区金沙江路 1517 弄',},];
</script>