Refactor: 树根据新的数据结构的要求重构，支持多级树点击文字选中

src/components/CustomTree/index.vue

@@ -1,6 +1,7 @@
 <template>
   <a-tree
     class="custom-tree"
+    ref="treeRef"
     v-bind="$attrs"
     v-model="checkedKeys"
     checkable
@@ -14,6 +15,7 @@
 </template>
 
 <script>
+import { cloneDeep } from 'lodash'
 export default {
   props: {
     treeData: {
@@ -41,47 +43,76 @@ export default {
   },
   methods: {
     onTreeSelect(_, { node }) {
-      const selectedKey = node.eventKey
+      const selectedKey = node.eventKey // 选中的节点的key
-      const parentKey = node.$parent.eventKey
+      const findIndex = this.checkedKeys.findIndex(key => key == selectedKey) // 当前选中的节点处在选中的节点列表中的位置
 
-      const findIndex = this.checkedKeys.findIndex(key => key == selectedKey)
+      const children = node.dataRef.children
 
-      if (parentKey) {
+      if (children && children.length) {
-        // 选中的是子级节点
+        // 是父节点
+        const allChildren = this.getAllChildrenData(node.dataRef.children)
+        const childrenKeys = allChildren.map(child => child[this.replaceFields.key])
+        if(node.checked) { // 已经选中了，取消选中
+          let _checkedKeys = cloneDeep(this.checkedKeys)
+          _checkedKeys.splice(findIndex, 1)
+          _checkedKeys = _checkedKeys.filter(checkedKey => {
+            return !childrenKeys.includes(checkedKey)
+          })
+          this.checkedKeys = _checkedKeys
+        }
+        else {
+          this.checkedKeys.push(selectedKey)
+          this.checkedKeys.push(...childrenKeys.filter(childKey => !this.checkedKeys.includes(childKey)))
+        }
+      } else {
+        // 是最终子节点
+        const ancestorNodes = this.getAllAncestorNode(node)
         if (-1 == findIndex) {
           // 选中了
           this.checkedKeys.push(selectedKey)
-
+          ancestorNodes.forEach(node => {
-          const parentNode = this.treeData.find(tree => tree[this.replaceFields.key] == parentKey) // 找到树列表中的父节点
+            this.$nextTick(() => {
-          const childrenKeys = parentNode.children.map(child => child[this.replaceFields.key])
+              if (node.checked) {
-          if (childrenKeys.every(key => this.checkedKeys.includes(key))) {
+                this.checkedKeys.push(node.eventKey)
-            // 如果子列表每一个都能在选中的列表中找到，则是全选
-            this.checkedKeys.push(parentKey)
               }
+            })
+          })
         } else {
           // 取消了
           this.checkedKeys.splice(findIndex, 1)
+          ancestorNodes.forEach(node => { // 取消所有祖先节点的选中状态
+            const index = this.checkedKeys.findIndex(key => key == node.eventKey)
+            if(-1 !== index) {
+              this.checkedKeys.splice(index, 1)
+            }
+          })
+        }
+      }
+    },
 
-          const findParent = this.checkedKeys.findIndex(key => key == parentKey)
+    // 获取一个节点下所有层级子节点的集合
-          if (-1 !== findParent) {
+    getAllChildrenData(nodeData) {
-            this.checkedKeys.splice(findParent, 1)
+      const childDataList = []
+      nodeData.forEach(child => {
+        childDataList.push(child)
+        if(child.children) {
+         childDataList.push(...this.getAllChildrenData(child.children))
         }
-        }
+      })
-      } else {
+      return childDataList
-        //选中的是父级节点
+    },
-        const parentNode = this.treeData.find(tree => tree[this.replaceFields.key] == selectedKey)
-        const childrenKeys = parentNode.children.map(child => child[this.replaceFields.key])
 
-        const findParent = this.checkedKeys.findIndex(key => key == selectedKey)
+    getAllAncestorNode(currNode) {
-        if (-1 == findParent) {
+      const nodeList = []
-          // 未选中父节点,则将子节点都选中
+      const parentNode = currNode.$parent
-          this.checkedKeys.push(selectedKey)
+      const parentKey = parentNode ? parentNode.eventKey : undefined
-          this.checkedKeys.push(...childrenKeys)
+      const hasParentKey = parentKey !== null && parentKey !== undefined
-        } else {
+      const isLeafNode = -1 == this.treeData.findIndex(treeNode => treeNode[this.replaceFields.key] == parentKey)
-          // 已经选中了父节点,则将子节点都取消选中
+      nodeList.push(parentNode)
-          this.checkedKeys = this.checkedKeys.filter(key => key !== selectedKey && !childrenKeys.includes(key))
+      if (hasParentKey && isLeafNode) {
-        }
+        nodeList.push(...this.getAllAncestorNode(parentNode))
       }
+      return nodeList
     }
   },
   watch: {