feat(tree): 完成树形组件复选框功能

src/module/tree/TreeEntity.vue

@@ -12,7 +12,7 @@ type EventType = 'icon' | 'node'
 
 interface TreeEntityProps {
   node: TreeNode
-  showCheckbox?: boolean,
+  showCheckbox?: boolean
   updateCheckedByNode: (node: TreeNode) => void
 }
 
@@ -79,7 +79,10 @@ function innerClick(node: TreeNode, type: EventType) {
  * @param arg
  * @param node
  */
-function handleCheckboxChange (arg: { checked: boolean, value: string }, node: TreeNode) {
+function handleCheckboxChange(
+  arg: { checked: boolean; value: string },
+  node: TreeNode
+) {
   props.updateCheckedByNode(node)
 }
 </script>
@@ -102,12 +105,16 @@ function handleCheckboxChange (arg: { checked: boolean, value: string }, node: T
           </span>
           <LayCheckbox
             v-if="showCheckbox"
+            v-model:checked="node._checked"
             name="name"
             skin="primary"
-            v-model:checked="node._checked"
-            @change="(args) => { handleCheckboxChange(args, node) }"
+            @change="
+              (args) => {
+                handleCheckboxChange(args, node)
+              }
+            "
           >
-<!--            {{ node.title }} || {{node.id}}-->
+            <!--            {{ node.title }} || {{node.id}}-->
           </LayCheckbox>
           <span
             class="layui-tree-txt"
@@ -127,8 +134,8 @@ function handleCheckboxChange (arg: { checked: boolean, value: string }, node: T
           :key="index"
           :node="item"
           :show-checkbox="showCheckbox"
+          :update-checked-by-node="updateCheckedByNode"
           @node-click="innerClick"
-          :updateCheckedByNode="updateCheckedByNode"
         />
       </div>
     </div>
@@ -150,11 +157,15 @@ function handleCheckboxChange (arg: { checked: boolean, value: string }, node: T
           </span>
           <LayCheckbox
             v-if="showCheckbox"
+            v-model:checked="node._checked"
             name="name"
             skin="primary"
             label="1"
-            v-model:checked="node._checked"
-            @change="(args) => { handleCheckboxChange(args, node) }"
+            @change="
+              (args) => {
+                handleCheckboxChange(args, node)
+              }
+            "
           >
           </LayCheckbox>
           <span

src/module/tree/index.vue

@@ -194,8 +194,8 @@ export default {
       :key="node.id || index"
       :node="node"
       :show-checkbox="showCheckbox"
+      :update-checked-by-node="updateCheckedByNode"
       @node-click="handleNodeClick"
-      :updateCheckedByNode="updateCheckedByNode"
     />
   </div>
 </template>

src/module/tree/treeHelper.ts

@@ -1,6 +1,6 @@
 import { TreeData, TreeNode } from '/@src/module/tree/tree.type'
 import { Nullable } from '/@src/module/type'
-import { Ref, WritableComputedRef } from "vue";
+import { Ref, WritableComputedRef } from 'vue'
 
 /**
  * 添加父级parentId
@@ -19,7 +19,7 @@ export const generatorTreeData = (
     const inner = {
       ...item,
       parentId: parentId,
-      spread: item.spread || false
+      spread: item.spread || false,
     }
     if (item.children && item.children.length > 0) {
       inner.children = generatorTreeData(item.children, item.id)
@@ -130,12 +130,16 @@ export const getEmitNode = (
  * @param checkedKeys
  * @param checked
  */
-export const patchCheckedKeys = (tree: TreeNode[], checkedKeys: WritableComputedRef<(string | number)[]>, checked = false): void => {
+export const patchCheckedKeys = (
+  tree: TreeNode[],
+  checkedKeys: WritableComputedRef<(string | number)[]>,
+  checked = false
+): void => {
   if (!checkedKeys.value) {
     return
   }
   const len = tree.length
-  for (let i = 0; i < len; i++){
+  for (let i = 0; i < len; i++) {
     tree[i]._checked = checked
     const node = tree[i]
     // 该节点是checked
@@ -148,7 +152,7 @@ export const patchCheckedKeys = (tree: TreeNode[], checkedKeys: WritableComputed
       if (node.children && node.children.length > 0) {
         patchCheckedKeys(node.children, checkedKeys, false)
         // 判断children是否为都选中，如果是都选中的情况下，父组件也得是选中
-        const allChildrenChecked = node.children.every(it => it._checked)
+        const allChildrenChecked = node.children.every((it) => it._checked)
         if (allChildrenChecked) {
           node._checked = true
         }
@@ -172,7 +176,11 @@ function updateChildren(data: TreeNode[], flag: boolean) {
  * @param clickNode
  * @param parentNode
  */
-export function updateInnerTreeDataChecked(data: TreeNode[], clickNode: TreeNode, parentNode?: TreeNode) {
+export function updateInnerTreeDataChecked(
+  data: TreeNode[],
+  clickNode: TreeNode,
+  parentNode?: TreeNode
+) {
   const len = data.length
   for (let i = 0; i < len; i++) {
     const currentNode = data[i]
@@ -189,13 +197,13 @@ export function updateInnerTreeDataChecked(data: TreeNode[], clickNode: TreeNode
     }
     // 当前节点有选中，父节点一定选中
     if (currentNode.children && currentNode.children.length > 0) {
-      currentNode._checked = currentNode.children.some(it => it._checked)
+      currentNode._checked = currentNode.children.some((it) => it._checked)
     }
   }
 }
 
 export function getCheckedKeys(tree: TreeNode[]): (string | number)[] {
-  let keys: (string | number) [] = []
+  let keys: (string | number)[] = []
   const len = tree.length
   for (let i = 0; i < len; i++) {
     const current = tree[i]

src/module/tree/useTreeData.ts

@@ -3,8 +3,9 @@ import { computed, ref, unref, watch } from 'vue'
 import {
   getCheckedKeys,
   getTreeSpreadKeys,
-  initialTreeData, updateInnerTreeDataChecked
-} from "/@src/module/tree/treeHelper";
+  initialTreeData,
+  updateInnerTreeDataChecked,
+} from '/@src/module/tree/treeHelper'
 import { Recordable } from '/@src/module/type'
 
 export const useTreeData: UseTreeData = (props, emit) => {
@@ -49,10 +50,14 @@ export const useTreeData: UseTreeData = (props, emit) => {
    * @param treeData
    * @param node
    */
-  watch(innerTreeData, tree => {
-    const emitCheckedKeys = getCheckedKeys(tree)
-    checkedKeys.value = emitCheckedKeys
-  }, { deep: true })
+  watch(
+    innerTreeData,
+    (tree) => {
+      const emitCheckedKeys = getCheckedKeys(tree)
+      checkedKeys.value = emitCheckedKeys
+    },
+    { deep: true }
+  )
 
   function updateInnerTreeData(treeData: TreeData[], node: TreeData): void {
     for (let i = 0; i < treeData.length; i++) {
@@ -82,7 +87,7 @@ export const useTreeData: UseTreeData = (props, emit) => {
    * 更新checked状态到node中
    * @param node
    */
-  function updateCheckedByNode (node: TreeNode) {
+  function updateCheckedByNode(node: TreeNode) {
     updateInnerTreeDataChecked(innerTreeData.value, node)
   }
 
@@ -92,6 +97,6 @@ export const useTreeData: UseTreeData = (props, emit) => {
     innerTreeData,
     updateInnerTreeData,
     treeWrapperClass,
-    updateCheckedByNode
+    updateCheckedByNode,
   }
 }