el-table树形表格结构，勾选联动 父级勾选

vue element el-table树形表格结构，勾选联动 父级勾选

<el-table
        :data="tableData"
        v-loading="loading"
        border
        ref="xTable"
        @select="select" 
        @select-all="handleSelectAllChange"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
</el-table>

定义一个变量ids:[]
    select(selection,row) {
      let vm = this
      // 操作行 row 在 已选范围 selection 内，认为是选中，否则是取消选中
      if (selection.some(el => row.id === el.id)) {
        // 设置当前行选中状态
        row.isChecked = true
        // 记录选中id
        vm.addId(row)
        // 若存在子级，自己全选
        if (row.children) {
          row.children.map(c => {
            vm.$refs.xTable.toggleRowSelection(c, true)
            c.isChecked = true
            vm.addId(c)
          })
        }
        // 若存在父级，设置父级选中
        if (row.parentId) {
          let pNode = {}
          vm.tableData.forEach(item => {  //根据后台数据可自行修改
            if(!item['children'])return;
            item['children'].find(x => {
              if(x.id === row.id){
                pNode = item
              }
            })
          })
          //let pNode = vm.tableData.find(x => x.id === row.parentId) // //根据后台数据可自行修改
          vm.$refs.xTable.toggleRowSelection(pNode, true)
          pNode.isChecked = true
          vm.addId(pNode)
        }
      } else {
        row.isChecked = false
        vm.deleteId(row)
        // 若存在子级，子级全部取消选中
        if (row.children) {
          row.children.map(i => {
            vm.$refs.xTable.toggleRowSelection(i, false)
            i.isChecked = false
            vm.deleteId(i)
          })
        }
        // 若存在父级，判断父级的子级(当前行的兄弟) ，若全部未选中，取消父级选中
        if (row.parentId) {
          let pNode = {}
          vm.tableData.forEach(item => { //根据后台数据可自行修改
            if(!item['children'])return;
            item['children'].find(x => {
              if(x.id === row.id){
                pNode = item
              }
            })
          })
          if (pNode.children && !pNode.children.some(el => el.isChecked == true)) {
            vm.$refs.xTable.toggleRowSelection(pNode, false)
            pNode.isChecked = false
            vm.deleteId(pNode)
          }
        }
      }
    },
    // 增加选中
    addId(o) {
      let id = o.id
      console.log('添加')
      if (id && this.ids.indexOf(id) < 0) {
        this.ids.push(id)
      }
    },
    // 删除选中
    deleteId(o) {
      console.log('删除')
      let id = o.id
      this.ids = this.ids.filter(item => item !== id)
    },
    /**
     * 切换全部select的change方法
     */
    handleSelectAllChange(selection) {
      this.toggleAllSelection(selection)
    },
    // 表格全选的 勾选 与 取消 的逻辑
    toggleAllSelection(selectedData) {
      this.isCheckedAll = !this.isCheckedAll
      this.ids = []；
      this.multipleSelection = selectedData
      if (this.isCheckedAll) {
        selectedData.forEach(subRow => {
          this.ids.push(subRow.id)
          this.toggleSelection(subRow['children'] || [])
        })
      } else {
        this.$refs['xTable'].clearSelection()
      }
    },
    toggleSelection(rows) {
      if (!rows.length) {
        return
      }
      rows.forEach(row => {
        // 如果为父数据 直接勾选
        if (!this.rowHasSelected(row)) {
          this.ids.push(row.id)
          this.$refs['xTable'].toggleRowSelection(row)
        }
        // 如果存在子数据  则回调
        if (row['children']) {
          this.toggleSelection(row['children'] || [])
        }
      })
    },
    /**
     *判断是否为父级的id
     */
    rowHasSelected(row) {
      console.log(this.multipleSelection)
      let index = this.multipleSelection.find(item => {
        return item.id === row.id
      })
      return index ? true : false
    },