el-table 选中/全选/反选/分页选中存储方法

🌰 html:

<el-table
  :data="table"
  ref="multipleTable"
  @select-all="selectAllChange"
  @select="selectChange"
  @row-click="handleCurrentChange"
>
  <el-table-column type="selection"></el-table-column>
  <el-table-column label="状态" align="left"></el-table-column>
</el-table>

🌰 js:

data(){
	return {
		table:[],
		selectedlist:[],//点击选中数据
	}
},
methods:{
	//checkbox点击时
	selectChange(selection, row) {
	  this.changeSelectData(row);
	},
	
	//每行点击时
	handleCurrentChange(row, event, column) {
	  this.changeSelectData(row);
	},
	
	//全选
	selectAllChange(selection) {
	  if (this.selectedlist.length == 0) {
	    this.selectedlist = selection.map(s=>s)
	  } else {
	    if (selection.length == 0) {
	      this.table.forEach(res => {
	        const index = this.selectedlist.findIndex(s=>s.id == res.id);
	        if (index > -1) {
	          this.selectedlist.splice(index, 1);
	        }
	      });
	    } else {
	      selection.forEach(res => {
	        const index = this.selectedlist.findIndex(s=>s.id == res.id);
	        if (index == -1) {
	            this.selectedlist.push(res);
	        }
	      });
	    }
	  }
	},
	
	// 选中存储方法
	changeSelectData(row) {
	  if (this.selectedlist.length > 0) {
	    let same = false;
	    const index = this.selectedlist.findIndex(s=>s.id == row.id);
	    if (index > -1) {
	      same = true;
	      this.selectedlist.splice(index,1)
	    } else {
	      this.selectedlist.push(row);
	    }
	    this.$refs.multipleTable.toggleRowSelection(row, !same);
	  } else {
	    this.$refs.multipleTable.toggleRowSelection(row, true);
	    this.selectedlist.push(row);
	  }
	},
	//刷新展示选中（分页请求数据，拿到数据后调用该方法）
	showSelected() {
	  this.$refs.multipleTable.$nextTick(_ => {
	    this.table.map(res => {
	      const index = this.selectedlist.findIndex(s=>s.id == res.id);
	      if (index > -1) {
	        this.$refs.multipleTable.toggleRowSelection(res, true);
	      }
	    });
	  });
	},
}