vue使用Element-ui树形表格，父子多选框回显并关联

以下是html表格代码

<el-table
  :loading="gridLoading"
  :data="tableData"
  style="width: 100%;margin-bottom: 20px;"
  row-key="id"
  ref="multipleTable"
  border
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  @pagination-current-change="paginationCurrentChange"
  @pagination-size-change="paginationSizeChange"
  @select-all="selectAll"
  @select="selectChange"
>
</el-table>

以下是js代码

export default {
  name: 'Test',

  created() {
	this.getList()
  },
  data() {
    return {
      form: {},
      tableData: [],//表格数据
      allData: [],//所有表格数据, 包括子集
      allDataIndex: 0,//所有表格数据下标
      selectionData: [],//选中数据ID数组
    }
  },
  props: ['multipleSelection'],
  methods: {
    getList() {
      menu.findAllBySubUsers({subUsers: this.multipleSelection.join(',')}).then(response => {
        this.tableData = response.data;
        for (let i = 0; i < this.tableData.length; i++) {
          let row = this.tableData[i];
          row.level = (i + 1) + ""
          this.initSelection(row)
          this.initAllData(row)
        }
        this.gridLoading = false;
      });
    },
    /**
     * 表头多选按钮点击
     * @param selection 变动行
     */
    selectAll(selection) {
      let hasSelected = false
      //判断是否有数据被选中
      this.allData.forEach(i => {
        if (i.selection) {
          hasSelected = true
        }
      })
      //多选框点击
      this.allData.forEach(i => {
        this.$refs.multipleTable.toggleRowSelection(i, !hasSelected);
        i.selection = !hasSelected
      })
      //塞被选中的行
      this.selectionData = []
      this.allData.forEach(i => {
        if (i.selection) {
          this.selectionData.pushNoRepeat(i.id)
        }
      })
    },
    /**
     * 行数据多选按钮点击
     * @param row 当前行
     */
    selectChange(selection, row) {
      //当前数据等级
      let rowLevel = row.level
      //当前变动是否取消选中数据
      let isDelete = (this.selectionData.length - selection.length) > 0
      for (let i = 0; i < this.allData.length; i++) {
        let item = this.allData[i]
        if (isDelete) {
          //取消数据 -> 子级全取消, 父级不动
          if (item.level.substr(0, rowLevel.length) === rowLevel) {
            this.$refs.multipleTable.toggleRowSelection(item, false);
            this.selectionData.forEach(function(selectionDataItem, index, arr) {
              if(selectionDataItem === item.id) {
                arr.splice(index, 1)
              }
            })
          }
        }else {
          //选中数据 -> 父级、子级全添加
          if (item.level.substr(0, rowLevel.length) === rowLevel) {
            this.$refs.multipleTable.toggleRowSelection(item, true);
            this.selectionData.pushNoRepeat(item.id)
          }
          if(rowLevel.substr(0, item.level.length) === item.level){
            this.$refs.multipleTable.toggleRowSelection(item, true);
            this.selectionData.pushNoRepeat(item.id)
          }
        }
      }

    },
    /**
     * 初始化选中框, 选中数据
     * @param row 当前行
     */
    initSelection(row) {
      if (row.selection) {
        this.$refs.multipleTable.toggleRowSelection(row, true);
        this.selectionData.pushNoRepeat(row.id)
        if (row.children !== undefined) {
          row.children.forEach(i => {
            this.initSelection(i)
          })
        }
      }
    },
    /**
     * 初始化所有数据包括子级
     * @param row 当前行
     */
    initAllData(row) {
      this.allData[this.allDataIndex] = row
      this.allDataIndex++
      if (row.children !== undefined) {
        for (let i = 0; i < row.children.length; i++) {
          let item = row.children[i]
          item.level = row.level + '-' + (i + 1)
          this.initAllData(item)
        }
      }
    },
  }
}

Array.prototype.pushNoRepeat = function () {
  for (let i = 0; i < arguments.length; i++) {
    let ele = arguments[i];
    if (this.indexOf(ele) === -1) {
      this.push(ele);
    }
  }
};