vue 多選框 checkbox 父到子傳值

vue多選功能，

修改時選中的狀態不能從當前組件中得到，從父組件中傳過來。

 

 

 

 

 

 

這里 新增和修改封裝了一個組件，在點擊確定按鈕后，會發送新增或修改請求，重新渲染頁面。但是在點擊【新增】/ 【修改】按鈕時，不會發送請求，不會請求數據。所有的數據在頁面進行渲染時即拿到（數據在父組件中）。即在點擊修改按鈕時，並不會請求數據，（所有數據在點擊【確定】新增 / 修改 按鈕成功后重新渲染頁面時已經拿到）。想在修改的彈框里展示數據，需要將數據從父組件中傳給子組件。

問題1 ：

因為element-UI中對選框選中的值是name，沒有id。而我們獲取到選中的值后，是要將當前name的id傳給后台。

     

解決：遍歷數組，遍歷選中的值，通過值（name） 對應 id

      const that = this;
      const departmentID = [];
      this.department.forEach(function(v, i) { // 遍歷數組
        that.checkListValue.forEach(function(checked, index) { // 遍歷選中的值
          if (checked == v.name) {
            departmentID.push(v.id); // 找到 id
            that.dialog.data.departmentId = departmentID;
          }
        });
      });

問題2 ：

 所有的數據都在父組件中的 【dialog】中，如下圖

 

 子組件中用到的數據都在 父組件傳過來的 dialog中。使用時， 如下圖

 但是當多選框選中的值使用dialog的值時，如下圖

 在新增彈框中，選多選框時，選中一個會默認選中所有。（是因為新增時，多選框的值沒有，使用父組件傳來的值時，父組件傳過來的是 null ）。

后來新建一個數組，用來存選中的值，在點擊確定新增時，直接把該值對應的id 賦值給【dialog】，如下圖

 因為所有的數據都是綁定的dialog的值，發送請求時，傳dialog值即可。

這樣解決了新增時選中一個即選中所有的問題，但是在修改彈框里 ，【checkListValue】為空數組。不能選中已有的數據。

即修改的彈框中多選框的值 只能用dialog的值。

因為在新增時，父組件傳過來的是null，所以用v-if做判斷。

在確定修改按鈕時，將name對應的id賦值

 其實不用 v-if 也能解決，而且更方便。

新增的彈框，多選框選中的值使用dialog的值時，選多選框時，選中一個會默認選中所有。（是因為新增時，父組件傳過來的是 null ）。

我只需把父組件傳過來的值改成空數組 【】即可。這樣子組件即可直接綁定 dialog的值。如下圖：