el-table 默认勾选数据

目录

效果图

 步骤：

1. 看elementui 官网上的案例，用到的方法是自带的 toggleRowSelection

 2. 思路 

---

原委

       选中主表中的一条数据；判断与子表中的数据是否关联（如果子表的关联ID==主表的ID，则子表的这条数据显示被勾选）。

效果图

 步骤：

1. 看elementui 官网上的案例，用到的方法是自带的 toggleRowSelection

 2. 思路 

    判断 选中的这条数据的ID与弹窗里面的数据进行匹配，建一个临时数组，如果匹配成功，放入临时数组中，然后使用官网给的方法。

代码：

//1. 获取主表选中的数据
roleID =1

//弹窗
//2.  调接口获取子表格数据
that.$API.GetDepartmentUser(param).then((res) => {
        let tempTabledata = JSON.parse(res.data.data);
        
        that.$refs.cummonTable.SettableData(tempTabledata);
        this.getselectData(tempTabledata); // lu 然后掉方法，这个方法就是给子表关联ID与主表的ID一样的显示被勾选
      });


/**
     * 3. 获取==角色ID的数据，页面展示被勾选
     */
    getselectData(data) {
      
      let tempselectData = []; //临时数组
      data.map((item) => {
        // 遍历 子表数据data中RoleID(关联ID)== roleID（主表ID），放入新数据
        if (item.RoleID == this.RoleID) {
          tempselectData.push(item);
        }
      });
      console.log(tempselectData, "遍历之后的数据");
      let rows = tempselectData;
      //下面这个就是elementui 提供的方法
      if (rows) {
        rows.forEach((row) => {
          if (this.dialogVisible) {
            this.$nextTick(() => {
              this.$refs.cummonTable.$refs.table.toggleRowSelection(row, true);  //true 说明显示被勾选
            });
          }
        });
      } else {
      }
    },