el-table checks the data by default

Table of contents

renderings

 step:

1. Look at the case on the official website of elementui, the method used is the built-in toggleRowSelection

 2. Idea 

---

the whole story

       Select a piece of data in the main table; judge whether it is associated with the data in the sub-table (if the associated ID of the sub-table == the ID of the main table, the data display of the sub-table is checked).

renderings

 step:

1. Look at the case on the official website of elementui, the method used is the built-in toggleRowSelection

 2. Idea 

    Determine the ID of the selected piece of data to match the data in the pop-up window, build a temporary array, if the match is successful, put it into the temporary array, and then use the method provided by the official website.

code:

//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 {
      }
    },