element中Table表格控件实现单选功能、多选功能、两种分页方式

1、Table表格控件实现单选功能

<template><div><!-- highlight-current-row  是否要高亮当前行 --><!-- row-click  当某一行被点击时会触发该事件 --><el-table :data="tableData" style="width: 100%" @row-click="singleElection" highlight-current-row><el-table-column align="center" min-width="55" label="选择"><template slot-scope="scope"><!-- 可以手动的修改label的值，从而控制选择哪一项 --><!-- 注意：这里写 &nbsp 的目的是为了页面不显示内容，只显示单选操作 --><el-radio class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio></template></el-table-column><el-table-column align="center" prop="id" label="编号" min-width="80"></el-table-column><el-table-column align="center" prop="date" label="日期" min-width="150"></el-table-column><el-table-column align="center" prop="name" label="姓名" min-width="80"></el-table-column><el-table-column align="center" prop="address" label="地址" min-width="250"></el-table-column></el-table></div>
</template><script>
export default {name: "TablePage",data() {return {tableData: [{id: "0001",date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "0002",date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{id: "0003",date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{id: "0004",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],//   当前选择的行的idtemplateSelection: "",//   当前选择的行的数据checkList: [],};},methods: {singleElection(row) {this.templateSelection = row.id;this.checkList = this.tableData.filter((item) => item.id === row.id);console.log(`该行的编号为${row.id}`);},},
};
</script>

在这里插入图片描述

2、Table控件和Pagination控件实现多选和两种分页方式

方法一：使用slice方法

一次调用后端接口返回所有数据list，然后使用list.slice((pageNum - 1) * pageSize, pageNum * pageSize)使得数据根据页码改变 ;

方法二：多次调用接口

每次换页都调用接口，后端每次返回该页的数据

<template><div class="app-container"><div class="table-box"><!-- 1）方法一：使用slice方法 --><!-- 一次调用后端接口返回所有数据list，然后使用list.slice((pageNum - 1) * pageSize, pageNum * pageSize)使得数据根据页码改变 --><el-table :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange":data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)"><el-table-column label="序号" type="index" align="center"><template slot-scope="scope"><span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span></template></el-table-column><el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column><el-table-column align="center" prop="id" label="编号" min-width="80"></el-table-column><el-table-column align="center" prop="date" label="日期" min-width="150"></el-table-column><el-table-column align="center" prop="name" label="姓名" min-width="80"></el-table-column><el-table-column align="center" prop="address" label="地址" min-width="250"></el-table-column></el-table></div><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum":page-sizes="[2, 5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination><div class="button-box"><el-button size="small" type="primary" @click="submit">保存</el-button><el-button size="small" @click="reset">重置</el-button></div></div>
</template><script>
export default {name: "PaginationPage",data() {return {// 分页信息 （默认12条，具体可根据项目调用接口）total: 12,pageNum: 1,pageSize: 10,// 选中的id列表ids: [],// 列表list: [{id: "0001",date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",flag: false,},{id: "0002",date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",flag: true,},{id: "0003",date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",flag: false,},{id: "0004",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: false,},{id: "0005",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: true,},{id: "0006",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: true,},{id: "0007",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: false,},{id: "0008",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: true,},{id: "0009",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: false,},{id: "0010",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: false,},{id: "0011",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: false,},{id: "0012",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",flag: true,},],};},created() {// 默认选中this.defalutHandle()},methods: {// 默认选中defalutHandle() {this.$nextTick(() => {this.list.forEach((row) => {if (row.flag) {this.$refs.table.toggleRowSelection(row);}});});},// 单击选中行数据 clickRow(row) {this.$refs.table.toggleRowSelection(row);},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map((item) => item.id);console.log(this.ids, '选中的列表的id所组成的数组')},// 保存选中的数据编号getRowKey(row) {return row.id;},// 分页相关handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageSize = val;},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum = val;},//保存submit() {console.log(this.ids, '选中的列表的id所组成的数组')},//重置reset() {// 清除复选框this.$refs.table.clearSelection()},},
};
</script><style scoped>
.app-container {width: 100%;
}.table-box {margin-bottom: 20px;
}.button-box {margin-top: 20px;margin-bottom: 20px;
}
</style>

在这里插入图片描述