antd-vue(vue2版本)中的<a-table 树形表格勾选复选框级联选择

前言： 在做项目中，使用到了ant design vue组件库中的树形表格，需求就是勾选复选框时所有子级复选框要联动勾选上，取消某个子级复选框勾选时，对应的父级以及祖父级的复选框也要变成半取消勾选的样式。官网的例子，只有一层的勾选，不能做到多层的勾选，并且只要是树形表格，都没有这个功能，只能自己开发实现。

请先看效果:

先上表格配置代码

rowSelection如下图写在computed计算里面：

methods: {
    initTableList (data, checkFlag = false) {
      data.forEach(e => {
        e.checkFlag = checkFlag
        if (e?.children?.length) {
          this.initTableList(e.children, checkFlag)
        }
      })
    },
    // 表格checkbox选中事件
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    selectAllFun (selected) {
      this.initTableList(this.tableList, selected)
    },
    selectFun (record) {
      record.checkFlag = !record.checkFlag
      const _this = this
      function getLevelStatus (record) {
        if (!record.parent_id) {
          if (record?.children?.length) {
            return 1
          } else {
            return 4
          }
        } else {
          if (!record.children || !record.children.length) {
            return 3
          } else {
            return 2
          }
        }
      }
      function selectAllChildrens (data) {
        data.forEach(e => {
          e.checkFlag = record.checkFlag
          if (record.checkFlag) {
            !_this.selectedRowKeys.includes(e.block_id) && _this.selectedRowKeys.push(e.block_id)
          } else {
            _this.selectedRowKeys.forEach((selectKey, index) => {
              if (e.block_id === selectKey) {
                _this.selectedRowKeys.splice(index, 1)
              }
            })
          }
          if (e?.children?.length) {
            selectAllChildrens(e.children)
          }
        })
      }
      let findParentObj = {}
      function getExplicitNode (data, parentId) {
        data.forEach(e => {
          if (e.block_id === parentId) {
            findParentObj = e
          }
          if (e?.children?.length) {
            getExplicitNode(e.children, parentId)
          }
        })
        return findParentObj
      }
      function getSelectStatus (selectStatusArr, data) {
        data.forEach(child => {
          selectStatusArr.push(child.checkFlag)
          if (child?.children?.length) {
            getSelectStatus(selectStatusArr, child.children)
          }
        })
        return selectStatusArr
      }
      function operateOtherLevel (row) {
        let selectStatusArr = []
        const getParentItem = getExplicitNode(_this.tableList, row.parent_id)
        selectStatusArr = getSelectStatus(selectStatusArr, getParentItem.children)
        if (selectStatusArr.every(e => { return e === true })) {
          getParentItem.checkFlag = true
          !_this.selectedRowKeys.includes(getParentItem.block_id) && _this.selectedRowKeys.push(getParentItem.block_id)
        } else if (selectStatusArr.every(e => { return e === false })) {
          getParentItem.checkFlag = false
          _this.selectedRowKeys.forEach((selectKey, index) => {
            if (getParentItem.block_id === selectKey) {
              _this.selectedRowKeys.splice(index, 1)
            }
          })
        } else {
          getParentItem.checkFlag = ''
          _this.selectedRowKeys.forEach((selectKey, index) => {
            if (getParentItem.block_id === selectKey) {
              _this.selectedRowKeys.splice(index, 1)
            }
          })
        }
        if (getParentItem.parent_id) {
          operateOtherLevel(getParentItem)
        }
      }

      const getLevel = getLevelStatus(record)
      if (getLevel === 1) {
        selectAllChildrens(record.children)
      } else if (getLevel === 2) {
        selectAllChildrens(record.children)
        operateOtherLevel(record)
      } else if (getLevel === 3) {
        operateOtherLevel(record)
      }
    },
    setTableDiffClassName (record) {
      const baseClass = record.checkFlag === '' ? 'indeterminate' : ''
      return record.editKey === 'delete' ? `delete_tr ${baseClass}` : (record.editKey === 'add' ? `add_bg_yellow ${baseClass}` : `${baseClass}`)
    },
}

主要是递归方法。 其中indeterminate是用来设置半勾选半取消复选框的样式的，如下图

如有疑问请留言