elementui:el-table支持搜索、切换分页多选功能，以及数据回显

1、el-table相关代码，需注意:row-key="(row) => { return row.id }" 以及 :reserve-selection="true"

   <div class="boxList"><div class="search-form"><!-- 搜索表单 --><el-form :inline="true" :model="form" ref="form"><el-form-item label="名称" prop="name"><el-inputv-model="form.name"placeholder="请输入名称"></el-input></el-form-item><el-form-item label="专业" prop="major"><el-inputv-model="form.major"placeholder="请输入专业"></el-input></el-form-item><!-- 操作按钮 --><el-form-item><el-button type="primary" @click="handleQuery">查询</el-button><el-button type="warning" @click="resetForm">重置</el-button></el-form-item></el-form></div><el-tableref="table":data="newtableData"border@selection-change="selectionChangeHandle"row-class-name="disable-selection"height="300"style="width: 100%"><el-table-columntype="selection"width="50"fixed:reserve-selection="true"align="center"/><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="major" label="专业"></el-table-column><el-table-column prop="deptName" label="部门"></el-table-column></el-table><!-- 分页 --><div class="pagination"><el-paginationbackgroundlayout="total, sizes, prev, pager, next":total="page.total":current-page="page.current":page-size="page.size"@size-change="handleSizeChange"@current-change="handleCurrentChange"></el-pagination></div><divstyle="display: flex;align-items: center;margin-top: 14px;font-size: 14px;margin-left: 3px;">完成时间：<!-- <el-date-pickerclearablev-model="form.date"type="datetime"value-format="YYYY-MM-DD HH:mm:ss":placeholder="请选择日期"style="width: 36%"></el-date-picker> --><el-inputtype="Number"v-model="form.workTime":placeholder="'请输入'"clearablestyle="width: 36%"><template #append>分钟</template></el-input></div><div style="display: flex; justify-content: flex-end"><el-button type="primary" @click="onYunxing">运行 </el-button></div></div>

2、获取原数据列表和已选数据，注意// 回显已选中的行，$nextTick那段代码

    //获取列表async getUserDataAllListApi() {let params = {size: this.page.size,current: this.page.current,name: this.form.name,major: this.form.major,};let { data } = await repairTools.getUserDataAllList(params);this.page.size = data.size;this.page.total = data.total;this.newtableData = data.records;},//回填人员async getGroupUserDataListApi() {let params = {taskIds: this.schemeAllData.idList,taskLruName: this.schemeAllData.taskLruName,};let { data } = await repairTools.getGroupUserDataList(params);this.checkAll = data.data;// 回显已选中的行this.$nextTick(() => {this.newtableData.forEach((row) => {const isChecked = this.checkAll.some((checkRow) => checkRow.id === row.id);if (isChecked) {this.$refs.table.toggleRowSelection(row, true);}});});},

3、table点击selection-change可以动态获取数据是否有变动

    //选中selectionChangeHandle(selected) {console.log('99999999999选中',selected)this.newSelected = selected;this.newtableData.forEach((row) => {row.ruleselected = selected.includes(row);});},

4、有关分页事件

    handleSizeChange(val) {this.page.size = val;this.tabClick();},handleCurrentChange(val) {this.page.current = val;this.tabClick();},

5、通过异步来定义调用接口的前后顺序

    //点击tabasync tabClick() {if (this.activeName == "type2") {await  this.getUserDataAllListApi();await  this.getGroupUserDataListApi();} },

6、搜索和重置

   // 查询方法handleQuery() {this.tabClick();},// 重置表单resetForm() {this.$refs.form.resetFields();this.form.name = "";this.form.major = "";this.tabClick();},

7、完成代码

<!-- 方案优化 -->
<template><!-- fullscreen --><el-dialog:show-close="!run_disabled":title="schemeOptimization_open.onlyShow ? '维修方案详情' : '待修清单'"v-model="schemeOptimization_open.open"append-to-bodycenterclass="schemeOptimization"width="55%"@closed="closed"@opened="opened"><div><div class="WarWoundInfo pad"><el-tabsv-model="activeName"@tab-click="tabClick":before-leave="beforeLeave"stretch><el-tab-pane:label="schemeOptimization_open.onlyShow ? '维修方案详情' : '待修清单'"name="type1">11</el-tab-pane><el-tab-pane label="人员参数" name="type2"><div class="boxList"><div class="search-form"><!-- 搜索表单 --><el-form :inline="true" :model="form" ref="form"><el-form-item label="名称" prop="name"><el-inputv-model="form.name"placeholder="请输入名称"></el-input></el-form-item><el-form-item label="专业" prop="major"><el-inputv-model="form.major"placeholder="请输入专业"></el-input></el-form-item><!-- 操作按钮 --><el-form-item><el-button type="primary" @click="handleQuery">查询</el-button><el-button type="warning" @click="resetForm">重置</el-button></el-form-item></el-form></div><el-tableref="table":data="newtableData"border@selection-change="selectionChangeHandle"row-class-name="disable-selection"height="300"style="width: 100%"><el-table-columntype="selection"width="50"fixed:reserve-selection="true"align="center"/><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="major" label="专业"></el-table-column><el-table-column prop="deptName" label="部门"></el-table-column></el-table><!-- 分页 --><div class="pagination"><el-paginationbackgroundlayout="total, sizes, prev, pager, next":total="page.total":current-page="page.current":page-size="page.size"@size-change="handleSizeChange"@current-change="handleCurrentChange"></el-pagination></div><divstyle="display: flex;align-items: center;margin-top: 14px;font-size: 14px;margin-left: 3px;">完成时间：<!-- <el-date-pickerclearablev-model="form.date"type="datetime"value-format="YYYY-MM-DD HH:mm:ss":placeholder="请选择日期"style="width: 36%"></el-date-picker> --><el-inputtype="Number"v-model="form.workTime":placeholder="'请输入'"clearablestyle="width: 36%"><template #append>分钟</template></el-input></div><div style="display: flex; justify-content: flex-end"><el-button type="primary" @click="onYunxing">运行 </el-button></div></div></el-tab-pane></el-tabs></div><divv-show="schemeOptimization_open.onlyShow &&this.schemeData.type.sub_type == '人员限制下时间最短'"style="display: flex; justify-content: center; height: 50px"><el-buttonsize="small"type="primary"style="height: 30px"@click="goTo_schemeOptimization">方案优化</el-button></div><divv-show="!schemeOptimization_open.onlyShow"style="width: max-content; margin: 0 auto; height: 50px"><el-buttonv-show="activeName === 'type2'":disabled="run_disabled"size="small"style="margin: 0 20px; padding: 9px 25px; height: 30px"@click="resave">重置</el-button><el-button:disabled="run_disabled"size="small"style="padding: 9px 25px; height: 30px"type="success"@click="run">运行</el-button><!-- <el-button type="primary" size="small" style="margin-left: 0;padding: 9px 25px">保存</el-button> --></div></div></template><script>
import EchartTreeDialog from "./EchartTreeDialog.vue";
import EchartGanttDialog from "./EchartGanttDialog.vue";
import MaintenanceResourceTable from "./MaintenanceResourceTable.vue";
// { getRepairResources }
import repairTools from "@/api/basicData/repairTools";export default {name: "SchemeOptimization",props: {},components: { EchartTreeDialog, EchartGanttDialog, MaintenanceResourceTable },data() {return {newSelected: [],form: {name: null,major: null,},page: {size: 10,current: 1,total: null,},newtableData: [],};},mounted() {// this.getUserDataAllListApi();},watch: {schemeAllData: {deep: true,immediate: true,handler(a) {if (a) {}},},},methods: {//运行async onYunxing() {let arr = [];this.newSelected.forEach((i) => {arr.push(i.id);});let params = {workTime: this.form.workTime,userIdList: arr,taskIds: this.schemeAllData.idList,taskLruName: this.schemeAllData.taskLruName,};let { data } =await this.$API.repairTask.warWoundReport.getGeneticWorkData(params);if (data.code != 200) {this.$message.error(data.msg);} else {this.$message.success(data.msg);// eslint-disable-next-line vue/no-mutating-propsthis.schemeOptimization_open.open = false;}},//点击tabasync tabClick() {if (this.activeName == "type2") {await  this.getUserDataAllListApi();await  this.getGroupUserDataListApi();} },//回填人员async getGroupUserDataListApi() {let params = {taskIds: this.schemeAllData.idList,taskLruName: this.schemeAllData.taskLruName,};let { data } = await repairTools.getGroupUserDataList(params);this.checkAll = data.data;// 回显已选中的行this.$nextTick(() => {this.newtableData.forEach((row) => {const isChecked = this.checkAll.some((checkRow) => checkRow.id === row.id);if (isChecked) {this.$refs.table.toggleRowSelection(row, true);}});});},//获取列表async getUserDataAllListApi() {let params = {size: this.page.size,current: this.page.current,name: this.form.name,major: this.form.major,};let { data } = await repairTools.getUserDataAllList(params);this.page.size = data.size;this.page.total = data.total;this.newtableData = data.records;},// 查询方法handleQuery() {this.tabClick();},// 重置表单resetForm() {this.$refs.form.resetFields();this.form.name = "";this.form.major = "";this.tabClick();},//选中selectionChangeHandle(selected) {console.log('99999999999选中',selected)this.newSelected = selected;this.newtableData.forEach((row) => {row.ruleselected = selected.includes(row);});},handleSizeChange(val) {this.page.size = val;this.tabClick();},handleCurrentChange(val) {this.page.current = val;this.tabClick();},},
};
</script>

8、效果如下