【记录43】el-table @selection-change 数据回显、条件约束、历史回显清除

场景

在其他地方设置好人员，到对应的页面直接在表格中复选设置好的人员。解决方案用到selection-change方法

<el-button @click="EchoClick()">回显设置好的人</el-button>
<el-table ref="choeck" :data="TableData" @selection-change="SelectionChange" id="noAllTable">
	<el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>
// 注意：choeck、SelectionChange、noAllTable三个参数

实现

EchoClick() {
	let SetChooseList = [{phone:'176****1486', name:''}, {phone:'138****2366', name:''}, {phone:'131****2589', name:''}, {phone:'177****8118', name:''}];
	this.$nextTick(() => {
	  this.TableData.forEach((row) => {
	    for (let index = 0; index < SetChooseList.length; index++) {
	      let T = SetChooseList[index].phone == row.phone;
	      // 默认设置好的人员在TableData中是否存在
	      if (T == true) {
	      //  存在，复选框自动回显
	        this.$nextTick(() =>{
	          this.$refs.choeck.toggleRowSelection(row, true);
	        })
	        // 走完这步，完成一个数据回显
	      }
	    }
	  });
	});
}

到这里基本完成了回显功能。

追加需求

限制选中人员上限，大家可能会想到直接判断选中的list，实际操作中存在一个问题：你选择了，给了提示，表格显示上还是会选中。解决该问题，用到toggleRowSelection函数

SelectionChange(val){
	if(val.length < 10){
		// 来判断是否满足上限条件
		this.selist = val;
	}else{
		this.$message.error('最多选择9人');
		this.$refs.choeck.toggleRowSelection(val.pop());
		//  满足条件后，消除最后一次选择的数据
	}
}

发现问题优化

表格中选中的人员，点击取消后，再次进来人员还在，部分可能觉得正常，实际是不对（切换了数据绑定对象，还存在是不对的）。这里笔者做了一个点击取消就默认为当前选择的取消（不要了）。解决方案用到clearSelection函数

// 在赋值或回显之前，通过clearSelection函数来清除前面赋值数据。直接重新赋值是可以的，赋值数据不同时，是出现问题
this.$nextTick(() => {
  this.$refs.choeck.clearSelection();
});

以上是笔者在工作中，遇到的问题，希望能给大家带来帮助！！