注意：本帖为公开技术贴，不得用做任何商业用途

使用版本为vue2版本，vue3版本同理，请注意写法变更

本table在dialog中使用，会存在一个open方法作为打开dialog时的数据传输

<template><el-dialog title="xxxx选择" width="1200px" :visible.sync="value.flag" :before-close="handleClose" @open="handleOpen"><el-table :data="tableData" ref="multiTable" style="width: 100%" max-height="450" highlight-current-row border@select="handleSelectionChange" @row-click="handleRowClick" :row-key="getRowKeys"><el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column><el-table-column label="序号" type="index" width="50" align="center"></el-table-column><el-table-column label="ID" prop="pointId" width="80" align="center"></el-table-column><el-table-column label="名称" prop="name"></el-table-column><el-table-column label="类型" prop="type" align="center"></el-table-column></el-table><!-- 分页 --><div class="th-pagination"><el-pagination @size-change="sizeChange" @current-change="pageChange" :current-page="paging.page":page-size="paging.size" :total="paging.total"layout="total, sizes, prev, pager, next, jumper"></el-pagination></div><span slot="footer" class="dialog-footer"><el-button @click="close" size="mini">取 消</el-button><el-button type="primary" @click="submit" size="mini">确 定</el-button></span></el-dialog>
</template><script>export default {name: '',data() {// 表格数据tableData: [],// 当前页勾选项tableCheckedData: [],// 分页paging: {page: 1,size: 10,total: 0},// 传入的勾选项selectedArray: [],}},mounted() {// 获取tableData数据，自己写// 如果是弹窗，可以不用再mounted钩子中写，// 写在开启dialog时调用的方法中即可// this.init()},methods: {// 初始化init() {this.getData();},async getData(data) {// 初始化表格数据tableDatathis.tableData= []//按照自己的接口获得，在此不做演示},// 显示多少条发生改变// pageSize，改变时调用sizeChange(val) {// 记录const selectedArr = this.$refs.multiTable.selection.map(v => { return v.pointId })// 数组去重this.selectedArray = Array.from(new Set(this.selectedArray.concat(selectedArr)))this.paging.size = val;this.handleOpen()},// 页数发生变化pageChange(val) {// 获取当前页选中const selectedArr = this.$refs.multiTable.selection.map(v => { return v.pointId })// 数组去重this.selectedArray = Array.from(new Set(this.selectedArray.concat(selectedArr)))this.paging.page = val;this.handleOpen()},//记录分页勾选时，必要配置，具体请看文档getRowKeys(row) {return row.pointId;},/***这里是重点，处理反复勾选，*正选，反选，勾选状态矫正，*/handleSelectionChange(list, item) {// list，当前页所有选中项，// item，点击的row对象this.tableCheckedData = listif (this.selectedArray && this.selectedArray.length > 0) {for (let i = 0; i < this.selectedArray.length; i++) {// 当点击row里面pointId与传入this.selectedArray中的// 数据（id），相匹配，则取消勾选，// 并改变传入的数据数组if (this.selectedArray[i] === item.pointId) {this.selectedArray.splice(i, 1)}}}},handleRowClick(row, event, column) {// 取消选中该行this.$refs.multiTable.toggleRowSelection(row);},// dialog开启时，调用的方法async handleOpen() {await this.getData(this.queryData);// 对比当前，所有，勾选项，进行勾选操作this.$nextTick(() => {this.$refs.multiTable.clearSelection()if (this.selectedArray) {for (let i = 0; i < this.selectedArray.length; i++) {for (let j = 0; j < this.tableData.length; j++) {if (this.selectedArray[i] === this.tableData[j].pointId) {                                this.$refs.multiTable.toggleRowSelection(this.tableData[j])}}}}})},// 处理关闭handleClose() {this.close()},// 关闭dialogclose() {const data = { flag: false, callback: null }this.paging.page = 1// 关闭dialog，请根据自己的情况改this.$emit('closeDialog', data)},submit() {// 当前勾选项const pointList = this.tableCheckedData// console.log('pointList: ', pointList);// 当前勾选let lastPageChecked = pointList.map(v => { return v.pointId })lastPageChecked = Array.from(new Set(lastPageChecked))const finalChecked = arrayDeDuplication(lastPageChecked.concat(this.selectedArray))const arrayCleaned = finalChecked.filter(item => item !== undefined);//if (arrayCleaned.length <= 0) {return this.$message.warning('请选择点位！')}// console.log('lastPageChecked: ', lastPageChecked);// console.log('arrayCleaned: ', arrayCleaned);//this.close()//},},
}
</script>