目錄

效果圖

?步驟：

1. 看elementui?官網(wǎng)上的案例，用到的方法是自帶的 toggleRowSelection

?2.?思路?

原委

? ? ? ?選中主表中的一條數(shù)據(jù)；判斷與子表中的數(shù)據(jù)是否關(guān)聯(lián)（如果子表的關(guān)聯(lián)ID==主表的ID，則子表的這條數(shù)據(jù)顯示被勾選）。

效果圖

?步驟：

1. 看elementui?官網(wǎng)上的案例，用到的方法是自帶的 toggleRowSelection

?2.?思路?

? ? 判斷 選中的這條數(shù)據(jù)的ID與彈窗里面的數(shù)據(jù)進行匹配，建一個臨時數(shù)組，如果匹配成功，放入臨時數(shù)組中，然后使用官網(wǎng)給的方法。

代碼：

//1. 獲取主表選中的數(shù)據(jù)
roleID =1

//彈窗
//2.  調(diào)接口獲取子表格數(shù)據(jù)
that.$API.GetDepartmentUser(param).then((res) => {
        let tempTabledata = JSON.parse(res.data.data);
        
        that.$refs.cummonTable.SettableData(tempTabledata);
        this.getselectData(tempTabledata); // lu 然后掉方法，這個方法就是給子表關(guān)聯(lián)ID與主表的ID一樣的顯示被勾選
      });


/**
     * 3. 獲取==角色ID的數(shù)據(jù)，頁面展示被勾選
     */
    getselectData(data) {
      
      let tempselectData = []; //臨時數(shù)組
      data.map((item) => {
        // 遍歷 子表數(shù)據(jù)data中RoleID(關(guān)聯(lián)ID)== roleID（主表ID），放入新數(shù)據(jù)
        if (item.RoleID == this.RoleID) {
          tempselectData.push(item);
        }
      });
      console.log(tempselectData, "遍歷之后的數(shù)據(jù)");
      let rows = tempselectData;
      //下面這個就是elementui 提供的方法
      if (rows) {
        rows.forEach((row) => {
          if (this.dialogVisible) {
            this.$nextTick(() => {
              this.$refs.cummonTable.$refs.table.toggleRowSelection(row, true);  //true 說明顯示被勾選
            });
          }
        });
      } else {
      }
    },