【记录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();
});
以上是笔者在工作中，遇到的问题，希望能给大家带来帮助！！