el-table 默认数据选中优化版本

直接看代码

<template><div><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%;height:500px"@select="handleSelectChange"@select-all="handleSelectAllChange"row-key="id"><!-- reserve-selection 可以不要 但是就没有分页半选状态 没有的话 下handleSelectAllChange部分代码可以不要--><el-table-columntype="selection"width="55"reserve-selection/><el-table-columnlabel="日期"width="120"prop="date"/><el-table-columnprop="name"label="姓名"width="120"/></el-table><el-paginationbackground:current-page.sync="currentPage"layout="prev, pager, next":total="1000"@current-change="currentChange"/></div>
</template><script>
export default {data () {return {currentPage: 1,crossPageMap: new Map(),pageSize: 10,totalData: Array.from({ length: 1000 }, (_, index) => {return {date: '2016-05-03',id: index,name: '王小虎' + index}})}},computed: {tableData () {const { currentPage, totalData, pageSize } = thisreturn totalData.slice((currentPage - 1) * pageSize, currentPage * pageSize)},},methods: {currentChange (page) {this.currentPage = pagethis.search()},handleSelectChange (val, row) {const checked = this.crossPageMap.has(row.id)if (checked) {this.crossPageMap.delete(row.id)} else {this.crossPageMap.set(row.id, row)}},handleSelectAllChange (val) {this.tableData.forEach(row => {const isChecked = this.crossPageMap.has(row.id)if (val.length === 0) {// 取消全选 只有选中的需要改变状态if (isChecked) this.crossPageMap.delete(row.id)} else {// 全选 //  因为有reserve-selection 所以会返回其他页的数据 如果val里面没有当前页的数据 就删除 如果没有reserve-selection 则不需要这行循环的代码// reserve-selection 可以让分页的全选按钮保留半选状态if(val.findIndex(ele => ele.id == row.id) == -1){this.crossPageMap.delete(row.id)}//如果没有选中就添加if (!isChecked) this.crossPageMap.set(row.id,row)}})},search(){this.tableData.forEach(row => {const checked = this.crossPageMap.has(row.id)if (checked) this.$refs.multipleTable.toggleRowSelection(row, true)})// this.crossPageMap 请注意，无法响应式 计算属性也不行 有黑科技可以在计算属性里面用一个其他的属性收集依赖 每次选中项变化时修改这个属性，// 就可以进行触发 如果需要页面展示选中的数据 可以研究一下发个链接参考参考console.log(Array.from(this.crossPageMap.values()));}},mounted(){this.$nextTick(()=>{this.$refs.multipleTable.clearSelection()// 默认选中项目let defaultChecked = [{ id: 13},{id: 3}]defaultChecked.forEach(ele => {this.crossPageMap.set(ele.id, ele)})this.search()})}
}
</script>