vue element checkbox多選框 多組聯動數據嵌套多選、單選實際應用

先看我最近項目中要實現的功能，點擊“幹部管理組“、”員工管理組“與下屬員工複選框實現聯動

 後臺返回的數據結構大概是這樣的

[
  {
    title: '幹部',
    rows: [
      {
        id: 1,
        name: '張三'
      },
      {
        id: 2,
        name: '張四'
      },
      .......
    ]
  },
  {
    title: '員工',
    rows: [
      {
        id: 3,
        name: '李三'
      },
      {
        id: 3,
        name: '李四'
      },
      .......
    ]
  },
  .......
]

 官方文檔多選示例：

 我的實現過程：

• 組裝後臺返回的數據

將官方示例的數據結構作爲我的數據結構的子項，增加全選，被選中數據，控制選中狀態三個字段，cities相當於我的rows

貼代碼（加入了對isIndeterminate 這個參數的理解，可以看一下）：

• dom結構

 這裏邊有幾個點要注意

1，el-checkbox-group 綁定的 v-model 是 el-checkbox 的 :label 組成的數組，這兩個結構需要保持一致；

2，el-checkbox的change事件有默認的參數，所以在增加額外參數item的時候需要增加$event來拿到默認返回的value

官方說明：

• 參照官方示例修改父、子選框的change callback

 

至此我的功能就勉強實現了，但是總感覺非常的繁瑣，代碼易讀性不高（非常低），由於項目比較緊張，我也只是在這邊記錄一下。快下班的時候和同事聊起扁平數據轉化結構數據的時候（準備最近寫一下這篇文章，ztree數據兼容element tree數據轉化的時候用到）想到另一種解決思路，代碼易讀性會高一些，我簡單說明一下我的思路，列位如果碰到類似問題可以嘗試。

1，forEach後臺返回的數據，生成一個保存id的嵌套數組，同樣組裝allChecked等字段，以這個數組作爲原始數據，實現功能。

2，製作一個filter， {{ id | filter}}，根據id返回當前要顯示的內容。

 

感謝閱讀，前端小白，恭候大佬們賜教