vue element 从多项数据中选择展示N条数据

需求：从多个数据集列表中选择三个展示在页面上，不可多选。

前端框架：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)
          })
       }
      })
    },