elementui 樹形table 以及選擇聯動

通過elementui的樹形table組件，實現多級聯動效果

效果截圖

element 版本 element-ui": "2.13.2

主要思想 遞歸

vue頁面 包括數據結構 js

<template>
    <div class="tree-table-wrapper">
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column prop="name" label="頁面" width="180">
                <template slot-scope="props">
                    <el-checkbox
                        v-model="props.row.isChecked"
                        :indeterminate="props.row.indeterminate"
                        @change="checkboxChange(props.row)"
                    />
                    {{ props.row.name }}
                    {{ props.row.isChecked }}
                </template>
            </el-table-column>
            <el-table-column prop="authList" label="權限">
                <template slot-scope="props">
                    <div class="auth-checkbox">
                        <div v-for="(item, i) in props.row.authList" :key="i">
                            <el-checkbox
                                v-model="item.isChecked"
                                @change="checkboxChangeRight(props.row, item)"
                            ></el-checkbox>
                            {{item.name}}{{item.isChecked}}
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
  name: 'TreeTable',
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀區金沙江路 1518 弄',
          isChecked: false,
          indeterminate: false,
          authList: [
            {
              id: 101,
              pid: 1,
              date: '2016-05-02',
              name: '頁面1',
              address: '上海市普陀區金沙江路 1518 弄',
              isChecked: false
            },
            {
              id: 102,
              pic: 1,
              date: '2016-05-02',
              name: '頁面2',
              address: '上海市普陀區金沙江路 1518 弄',
              isChecked: false
            }
          ]
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎1',
          address: '上海市普陀區金沙江路 1517 弄',
          isChecked: false,
          indeterminate: false,
          authList: [
            {
              id: 201,
              pid: 2,
              date: '2016-05-02',
              name: '頁面1',
              address: '上海市普陀區金沙江路 1518 弄',
              isChecked: false
            },
            {
              id: 201,
              pid: 2,
              date: '2016-05-02',
              name: '頁面2',
              address: '上海市普陀區金沙江路 1518 弄',
              isChecked: false
            }
          ]
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎1',
          address: '上海市普陀區金沙江路 1519 弄',
          isChecked: false,
          indeterminate: false,
          authList: [
            {
              id: 301,
              pid: 3,
              date: '2016-05-02',
              name: '頁面1',
              address: '上海市普陀區金沙江路 1518 弄',
              isChecked: false
            },
            {
              id: 302,
              pid: 3,
              date: '2016-05-02',
              name: '頁面2',
              address: '上海市普陀區金沙江路 1518 弄',
              isChecked: false
            }
          ],
          children: [
            {
              pid: 3,
              id: 31,
              date: '2016-05-01',
              name: '王小虎2',
              address: '上海市普陀區金沙江路 1519 弄',
              isChecked: false,
              indeterminate: false,
              authList: [
                {
                  id: 3101,
                  pid: 31,
                  date: '2016-05-02',
                  name: '頁面1',
                  address: '上海市普陀區金沙江路 1518 弄',
                  isChecked: false
                },
                {
                  id: 3102,
                  pid: 31,
                  date: '2016-05-02',
                  name: '頁面2',
                  address: '上海市普陀區金沙江路 1518 弄',
                  isChecked: false
                }
              ]
            },
            {
              pid: 3,
              id: 32,
              date: '2016-05-01',
              name: '王小虎2',
              address: '上海市普陀區金沙江路 1519 弄',
              isChecked: false,
              indeterminate: false,
              authList: [
                {
                  id: 3201,
                  pid: 32,
                  date: '2016-05-02',
                  name: '頁面1',
                  address: '上海市普陀區金沙江路 1518 弄',
                  isChecked: false
                },
                {
                  id: 3202,
                  pid: 32,
                  date: '2016-05-02',
                  name: '頁面2',
                  address: '上海市普陀區金沙江路 1518 弄',
                  isChecked: false
                }
              ],
              children: [
                {
                  pid: 32,
                  id: 321,
                  date: '2016-05-01',
                  name: '王小虎3',
                  address: '上海市普陀區金沙江路 1519 弄',
                  isChecked: false,
                  indeterminate: false,
                  authList: [
                    {
                      id: 32101,
                      pid: 321,
                      date: '2016-05-02',
                      name: '頁面1',
                      address: '上海市普陀區金沙江路 1518 弄',
                      isChecked: false
                    },
                    {
                      id: 32102,
                      pid: 321,
                      date: '2016-05-02',
                      name: '頁面2',
                      address: '上海市普陀區金沙江路 1518 弄',
                      isChecked: false
                    }
                  ]
                },
                {
                  pid: 32,
                  id: 322,
                  date: '2016-05-01',
                  name: '王小虎3',
                  address: '上海市普陀區金沙江路 1519 弄',
                  isChecked: false,
                  indeterminate: false,
                  authList: [
                    {
                      id: 1,
                      date: '2016-05-02',
                      name: '頁面1',
                      address: '上海市普陀區金沙江路 1518 弄',
                      isChecked: false
                    },
                    {
                      id: 1,
                      date: '2016-05-02',
                      name: '頁面2',
                      address: '上海市普陀區金沙江路 1518 弄',
                      isChecked: false
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎1',
          address: '上海市普陀區金沙江路 1516 弄',
          isChecked: false,
          indeterminate: false,
          authList: [
            {
              id: 1,
              date: '2016-05-02',
              name: '頁面1',
              address: '上海市普陀區金沙江路 1518 弄',
              isChecked: false
            },
            {
              id: 1,
              date: '2016-05-02',
              name: '頁面2',
              address: '上海市普陀區金沙江路 1518 弄',
              isChecked: false
            }
          ]
        }
      ]
    }
  },
  methods: {
    /**
     * 左側復選框 按鈕點擊事件
     * @param {row: object} 當前選中的row數據
     * */

    checkboxChange(row) {
      const self = this
      // 當前checkbox狀態
      const isChecked = row.isChecked
      /**
       * 父級全選
       * @param {row: object}
       * 點擊左側checkbox 時 子級所有選項選中或取消 -- 包括右側checkbox
       * */

      changeAll(row)
      function changeAll(rowData) {
        // rowData.indeterminate = false
        // 改變checkbox狀態
        rowData.isChecked = isChecked
        // 改變右側表格中的checkbox
        rowData.authList &&
          rowData.authList.forEach(authItem => {
            authItem.isChecked = isChecked
          })
        if (rowData.children) {
          rowData.children.forEach(element => {
            // element.indeterminate = false
            // element.isChecked = isChecked
            // element.authList.forEach(authItem => {
            //   authItem.isChecked = isChecked
            // })
            // if (element.children) {
            //   changeAll(element)
            // }
            // 遞歸處理數據
            changeAll(element)
          })
        }
      }

      /**
       * 子級選擇
       * @param {row: object}
       * 點擊子級選項 選中子級右側數據 同時遞歸選中父級以及祖級
       * */

      changeParents(row)
      function changeParents(rowData) {
        // 所有數據
        const allData = self.tableData
        // 當前選擇的pid
        const pid = rowData.pid

        findParent(allData, pid)
        // 遞歸處理
        function findParent(element, pid) {
          element.forEach(item => {
            if (item.id == pid) {
              if (isChecked) {
                // 選中狀態為true
                // item.indeterminate = true
                item.isChecked = true
                // 遞歸處理父級狀態
                const pid = item.pid
                findParent(allData, pid)
              } else {
                changeLeftParent(self.tableData, row.pid)
              }
            } else {
              if (item.children) {
                findParent(item.children, pid)
              }
            }
          })
        }
      }

      // 處理左側取消checkbox狀態
      function changeLeftParent(element, pid) {
        element.forEach(item => {
          const checkList = []
          if (item.id == pid) {
            if (item.children) {
              item.children.forEach(citem => {
                checkList.push(citem.isChecked)
                citem.authList.forEach(cauthItem => {
                  checkList.push(cauthItem.isChecked)
                })
              })
            }
            item.authList.forEach(cauthItem => {
              checkList.push(cauthItem.isChecked)
            })

            if (!checkList.includes(true)) {
              item.isChecked = false
              changeLeftParent(self.tableData, item.pid)
            }
          } else {
            if (item.children) {
              changeLeftParent(item.children, pid)
            }
          }
        })
      }
    },
    // checkbox right
    checkboxChangeRight(row, item) {
      const self = this
      // 父級選擇
      const isChecked = item.isChecked
      if (isChecked) {
        // 狀態為true
        row.isChecked = true
      } else {
        // 狀態為false
        // ----------取消父級的選中狀態-------------
        const checkList = []
        row.authList.forEach(authItem => {
          checkList.push(authItem.isChecked)
        })
        if (!row.children) {
          // 無子級
          if (!checkList.includes(true)) {
            row.isChecked = false
          }

          //
          changeLeftParent(self.tableData, row.pid)
        } else {
          // 有子級
          if (!checkList.includes(true)) {
            const checkList = []
            row.children.forEach(item => {
              checkList.push(item.isChecked)
            })

            if (!checkList.includes(true)) {
              row.isChecked = false
            }
          }

          changeLeftParent(self.tableData, row.pid)
        }
        // ------------------------------------------
      }

      const allData = self.tableData
      findParent(allData, row.pid)
      // 遞歸處理
      function findParent(element, pid) {
        element.forEach(item => {
          if (item.id == pid) {
            if (isChecked) {
              // 選中狀態為true
              // item.indeterminate = true
              item.isChecked = true
              // 遞歸處理父級狀態
              const pid = item.pid
              findParent(allData, pid)
            }
          } else {
            if (item.children) {
              findParent(item.children, pid)
            }
          }
        })
      }

      // 處理左側取消checkbox狀態
      function changeLeftParent(element, pid) {
        element.forEach(item => {
          const checkList = []
          if (item.id == pid) {
            if (item.children) {
              item.children.forEach(citem => {
                checkList.push(citem.isChecked)
                citem.authList.forEach(cauthItem => {
                  checkList.push(cauthItem.isChecked)
                })
              })
            }
            item.authList.forEach(cauthItem => {
              checkList.push(cauthItem.isChecked)
            })

            if (!checkList.includes(true)) {
              item.isChecked = false
              changeLeftParent(self.tableData, item.pid)
            }
          } else {
            if (item.children) {
              changeLeftParent(item.children, pid)
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.auth-checkbox {
    width: 100%;
    // display: flex;
    // flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    div {
        margin-right: 5px;
    }
}
</style>