Vue3初学之Element-plus-table组件及分页

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

• 安装 Element Plus
  npm install element-plus --save
  
• 引入 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. 编辑功能
允许用户直接在表格中编辑数据：

1. <template>   <div class="container">
2.         <el-table :data="tableData" style="width: 100%">
3.           <el-table-column prop="date" label="日期" width="180">
4.             <template #default="scope">
5.               <el-input v-if="scope.row._edit" v-model="scope.row.date" />
6.               <span v-else>{{ scope.row.date }}</span>
7.             </template>
8.           </el-table-column>
9.           <el-table-column prop="name" label="姓名" width="180">
10.             <template #default="scope">
11.               <el-input v-if="scope.row._edit" v-model="scope.row.name" />
12.               <span v-else>{{ scope.row.name }}</span>
13.             </template>
14.           </el-table-column>
15.           <el-table-column prop="address" label="地址">
16.             <template #default="scope">
17.               <el-input v-if="scope.row._edit" v-model="scope.row.address" />
18.               <span v-else>{{ scope.row.address }}</span>
19.             </template>
20.           </el-table-column>
21.           <el-table-column label="操作" width="180">
22.             <template #default="scope">
23.               <div v-if="scope.row._edit">
24.                 <el-button type="primary" @click="handleSave(scope)">保存</el-button>
25.                 <el-button @click="handleCancel(scope)">取消</el-button>
26.               </div>
27.               <el-button v-else type="primary" @click="handleEdit(scope)">编辑</el-button>
28.             </template>
29.           </el-table-column>
30.         </el-table>   </div> </template>
31.    
32.     <script setup> import { ref } from 'vue';
33.    
34.     const tableData = ref([   {
35.         date: '2016-05-02',
36.         name: '张三',
37.         address: '上海市普陀区金沙江路 1518 弄',
38.         _edit: false,   },   {
39.         date: '2016-05-04',
40.         name: '李四',
41.         address: '上海市普陀区金沙江路 1517 弄',
42.         _edit: false,   },   {
43.         date: '2016-05-01',
44.         name: '王五',
45.         address: '上海市普陀区金沙江路 1519 弄',
46.         _edit: false,   },   {
47.         date: '2016-05-03',
48.         name: '赵六',
49.         address: '上海市普陀区金沙江路 1516 弄',
50.         _edit: false,   }, ]);
51.    
52.     const handleEdit = (scope) => {   scope.row._edit = true; };
53.    
54.     const handleSave = (scope) => {   scope.row._edit = false;  
55.     console.log('保存', scope.row); };
56.    
57.     const handleCancel = (scope) => {   scope.row._edit = false; };
58.     </script>

复制代码

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

1. <template>
2.   <div class="container">
3.     <el-table :data="tableData" style="width: 100%">
4.       <el-table-column prop="date" label="日期" width="180" />
5.       <el-table-column prop="name" label="姓名" width="180" />
6.       <el-table-column prop="address" label="地址" />
7.     </el-table>
8.     <el-pagination
9.       :current-page="currentPage"
10.       :page-sizes="[10, 20, 50, 100]"
11.       :page-size="pageSize"
12.       layout="total, sizes, prev, pager, next, jumper"
13.       :total="total"
14.       @size-change="handleSizeChange"
15.       @current-change="handleCurrentChange"
16.     />
17.   </div>
18. </template>
20. <script setup>
21. import { ref } from 'vue';
23. const tableData = ref([
24.   // 初始数据
25. ]);
27. const currentPage = ref(1);
28. const pageSize = ref(10);
29. const total = ref(100);
31. const handleSizeChange = (newSize) => {
32.   pageSize.value = newSize;
33.   fetchTableData();
34. };
36. const handleCurrentChange = (newPage) => {
37.   currentPage.value = newPage;
38.   fetchTableData();
39. };
41. const fetchTableData = () => {
42.   // 模拟数据请求
43.   const start = (currentPage.value - 1) * pageSize.value;
44.   const end = start + pageSize.value;
45.   tableData.value = data.slice(start, end);
46. };
48. const data = [
49.   // 你的完整数据
50.   {
51.     date: '2016-05-02',
52.     name: '张三',
53.     address: '上海市普陀区金沙江路 1518 弄',
54.   },
55.       {
56.     date: '2016-05-02',
57.     name: '张三',
58.     address: '上海市普陀区金沙江路 1518 弄',
59.   },
60.       {
61.     date: '2016-05-02',
62.     name: '张三',
63.     address: '上海市普陀区金沙江路 1518 弄',
64.   },
65.       {
66.     date: '2016-05-02',
67.     name: '张三',
68.     address: '上海市普陀区金沙江路 1518 弄',
69.   },
70.       {
71.     date: '2016-05-02',
72.     name: '张三',
73.     address: '上海市普陀区金沙江路 1518 弄',
74.   },
75.       {
76.     date: '2016-05-02',
77.     name: '张三',
78.     address: '上海市普陀区金沙江路 1518 弄',
79.   },
80.       {
81.     date: '2016-05-02',
82.     name: '张三',
83.     address: '上海市普陀区金沙江路 1518 弄',
84.   },
85.       {
86.     date: '2016-05-02',
87.     name: '张三',
88.     address: '上海市普陀区金沙江路 1518 弄',
89.   },
90.       {
91.     date: '2016-05-02',
92.     name: '张三',
93.     address: '上海市普陀区金沙江路 1518 弄',
94.   },  {
95.     date: '2016-05-02',
96.     name: '张三',
97.     address: '上海市普陀区金沙江路 1518 弄',
98.   },
99.    
100.   {
101.     date: '2016-05-04',
102.     name: '李四',
103.     address: '上海市普陀区金沙江路 1517 弄',
104.   },
106. ];
107. </script>

复制代码