需求:从多个数据集列表中选择三个展示在页面上,不可多选。
前端框架:vue、element
后端给了两个接口,1、展示的数据集
2、所有的数据集
思路:先将展示的数据集获取到,展示。点击更换展示调用获取所有数据集的接口,利用element默认选中的方法:this.$refs.multipleTable.toggleRowSelection(row,true),进行一个选中筛选。打开选则数据集模态框,让用户只能勾选3个,勾选三个以上则不让勾选,方法:this.$refs.multipleTable.toggleRowSelection(row,false)
实现:1、将展示的数据集的ID筛选出来,得到临时数组 remArr
2、给获取到的数据集加一个自定义属性 isCheck
3、表格调用elelemt组件自带的 select 事件。取事件的第二个参数 row (当前选中的表格的)
4、判断remArr的长度,若大于3就不让添加,小于三可以进行添加
5、将临时数组remArr 用参数接收
代码:
禁止选中:
//数据集的多选框
async handleSelectionChange(val,row){
row.checked=!row.checked;
if(row.checked){
if (this.CheckId.length >= 3) {
this.$message({
message: '警告,最多选取三个',
type: 'warning'
});
this.$refs.multipleTable.toggleRowSelection(row, false);
}
else{
this.CheckId.push(row.id);
}
}
else{
let num = this.CheckId.indexOf(row.id)
if(num>-1){
this.CheckId.splice(num,1)
}
}
},
默认选中:
//筛选选中的数据集
datasetFiltering(){
this.DataSetList.map((row)=>{
if (this.CheckId.length>0 && this.CheckId.indexOf(row.id)!=-1){
this.$nextTick(function () {
this.$refs.multipleTable.toggleRowSelection(row,true)
})
}
})
},