🐛(component): 修复 tree 组件 title 插槽不生效的问题

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.5.1",
+  "version": "1.6.0-alpha.2",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

package/component/src/component/table/TableRow.vue

@@ -172,7 +172,9 @@ const renderRowClassName = (data: any, index: number) => {
   return props.rowClassName(data, index);
 };
 
-const childrenIndentSize = computed(() => props.currentIndentSize + props.indentSize);
+const childrenIndentSize = computed(
+  () => props.currentIndentSize + props.indentSize
+);
 
 const renderFixedStyle = (column: any, columnIndex: number) => {
   if (column.fixed) {

package/component/src/component/table/index.vue

@@ -504,11 +504,13 @@ props.columns.map((value: any) => {
 
 const currentIndentSize = ref(0);
 const childrenExpandSpace = computed(() => {
-  return props.dataSource.find((value: any) => {
-    if (value[props.childrenColumnName]) {
-      return true; 
-    }
-  }) != undefined;
+  return (
+    props.dataSource.find((value: any) => {
+      if (value[props.childrenColumnName]) {
+        return true;
+      }
+    }) != undefined
+  );
 });
 
 /**

package/component/src/component/tree/TreeNode.vue

@@ -31,6 +31,7 @@ export interface TreeNodeProps {
   nodeList: TreeData[];
   showCheckbox: boolean;
   showLine: boolean;
+  selectedKey: any;
   checkStrictly: boolean;
   collapseTransition: boolean;
   onlyIconControl: boolean;
@@ -122,7 +123,7 @@ const isChildAllSelected = computed(() => {
     return res;
   }
 
-  return function (node: TreeData): boolean {
+  return (node: TreeData): boolean => {
     if (props.checkStrictly) {
       return false;
     } else {
@@ -157,7 +158,7 @@ const isChildAllSelected = computed(() => {
           />
         </span>
         <lay-checkbox
-          value="miss"
+          value=""
           skin="primary"
           :modelValue="node.isChecked"
           :disabled="node.isDisabled"
@@ -169,15 +170,11 @@ const isChildAllSelected = computed(() => {
           :class="{
             'layui-tree-txt': true,
             'layui-disabled': node.isDisabled,
+            'layui-this': selectedKey === node.id
           }"
           @click.stop="handleTitleClick(node)"
         >
-          <template v-if="slots.title">
-            <slot name="title" :data="node"></slot>
-          </template>
-          <template v-else>
-            {{ node.title }}
-          </template>
+          <slot name="title" :data="node">{{ node.title }}</slot>
         </span>
       </div>
     </div>
@@ -192,13 +189,14 @@ const isChildAllSelected = computed(() => {
           :node-list="node.children"
           :show-checkbox="showCheckbox"
           :show-line="showLine"
+          :selected-key="selectedKey"
           :collapse-transition="collapseTransition"
           :checkStrictly="checkStrictly"
           :only-icon-control="onlyIconControl"
           @node-click="recursiveNodeClick"
         >
-          <template v-if="slots.title">
-            <slot name="title" :data="node"></slot>
+          <template v-if="$slots.title" v-slot:title="{ data }">
+            <slot name="title" :data="data"></slot>
           </template>
         </tree-node>
       </div>

package/component/src/component/tree/index.less

@@ -13,6 +13,10 @@
   position: relative;
 }
 
+.layui-tree-txt.layui-this {
+  color: var(--global-checked-color)!important;
+}
+
 .layui-tree-pack {
   display: none;
   padding-left: 20px;

package/component/src/component/tree/index.vue

@@ -22,6 +22,7 @@ export interface OriginalTreeData {
 
 export interface TreeProps {
   checkedKeys?: KeysType;
+  selectedKey?: any;
   data: OriginalTreeData;
   showCheckbox?: boolean;
   checkStrictly?: boolean;
@@ -54,6 +55,7 @@ const props = withDefaults(defineProps<TreeProps>(), {
   onlyIconControl: false,
   disabled: false,
   showLine: true,
+  selectedKey: "",
   replaceFields: () => {
     return {
       id: "id",
@@ -136,14 +138,15 @@ function handleClick(node: TreeData) {
       :node-list="nodeList"
       :show-checkbox="showCheckbox"
       :show-line="showLine"
+      :selectedKey="selectedKey"
       :check-strictly="checkStrictly"
       :collapse-transition="collapseTransition"
       :only-icon-control="onlyIconControl"
       @node-click="handleClick"
     >
-      <template v-if="slots.title">
-        <slot name="title" :data="data"></slot>
-      </template>
+        <template v-if="$slots.title" v-slot:title="{ data }">
+          <slot name="title" :data="data"></slot>
+        </template>
     </tree-node>
   </div>
 </template>

package/component/src/component/tree/tree.ts

@@ -133,33 +133,36 @@ class Tree {
     return node;
   }
 
-  treeForeach (tree: any, func: Function) {
+  treeForeach(tree: any, func: Function) {
     tree.forEach((data: any) => {
-      data.children && this.treeForeach(data.children, func) // 遍历子树
-      func(data)
-    })
+      data.children && this.treeForeach(data.children, func); // 遍历子树
+      func(data);
+    });
   }
 
   setChildrenChecked(checked: boolean, nodes: TreeData[]) {
     var ableCount = 0;
     var checkCount = 0;
     const len = nodes.length;
-    this.treeForeach(nodes ,(node: any) => {
-      if(!node.isDisabled) {
+    this.treeForeach(nodes, (node: any) => {
+      if (!node.isDisabled) {
         ableCount = ableCount + 1;
-        if(node.isChecked) {
+        if (node.isChecked) {
           checkCount = checkCount + 1;
         }
       }
-    })
-    checkCount < ableCount ? checked = true : checked = false;
+    });
+    checkCount < ableCount ? (checked = true) : (checked = false);
     for (let i = 0; i < len; i++) {
-      if(!nodes[i].isDisabled || (nodes[i].isDisabled && nodes[i].children.length > 0)) {
+      if (
+        !nodes[i].isDisabled ||
+        (nodes[i].isDisabled && nodes[i].children.length > 0)
+      ) {
         nodes[i].isChecked = checked;
       }
       nodes[i].children &&
-      nodes[i].children.length > 0 &&
-      this.setChildrenChecked(checked, nodes[i].children);
+        nodes[i].children.length > 0 &&
+        this.setChildrenChecked(checked, nodes[i].children);
     }
   }
 

package/component/src/component/tree/useTree.ts

@@ -33,15 +33,6 @@ export const useTree: UseTree = (props: TreeProps, emit: TreeEmits) => {
     return nodes;
   });
 
-  watch(
-    () => nodeList,
-    (list) => {
-      const { checkedKeys, expandKeys } = tree.getKeys();
-      emit("update:checkedKeys", checkedKeys);
-    },
-    { deep: true }
-  );
-
   return {
     tree,
     nodeList,

package/component/src/component/treeSelect/index.vue

@@ -19,6 +19,7 @@ export interface LayTreeSelect {
   collapseTagsTooltip?: boolean;
   minCollapsedNum?: number;
   size?: string;
+  checkStrictly?: boolean;
 }
 
 export interface TreeSelectEmits {
@@ -34,13 +35,14 @@ const props = withDefaults(defineProps<LayTreeSelect>(), {
   allowClear: false,
   collapseTagsTooltip: true,
   minCollapsedNum: 3,
+  checkStrictly: true,
   size: "md",
 });
 
 const singleValue = ref();
 const multipleValue = ref(["1"]);
-const dropdownRef = ref();
 const openState = ref(false);
+const dropdownRef = ref();
 const emits = defineEmits<TreeSelectEmits>();
 
 const selectedValue = computed({
@@ -53,6 +55,16 @@ const selectedValue = computed({
   },
 });
 
+const checkedKeys = computed({
+  get() {
+    return props.multiple ? props.modelValue : [];
+  },
+  set(value) {
+    emits("update:modelValue", value);
+    emits("change", value);
+  }
+})
+
 watch(
   [selectedValue],
   () => {
@@ -60,12 +72,14 @@ watch(
       multipleValue.value = selectedValue.value.map((value: any) => {
         const node: any = getNode(props.data, value);
         node.label = node.title;
+        node.closable = !node.disabled;
         return node;
       });
     } else {
-      singleValue.value = props.data.find((item: any) => {
-        return item.value === selectedValue.value;
-      })?.label;
+      const node: any = getNode(props.data, selectedValue.value);
+      if(node) {
+        singleValue.value = node.title;
+      }
     }
   },
   { immediate: true, deep: true }
@@ -87,14 +101,14 @@ const handleClick = (node: any) => {
       @hide="openState = false"
     >
       <lay-tag-input
-        v-if="multiple"
-        v-model="multipleValue"
         :size="size"
         :allow-clear="allowClear"
         :placeholder="placeholder"
         :collapseTagsTooltip="collapseTagsTooltip"
         :minCollapsedNum="minCollapsedNum"
         :disabledInput="true"
+        v-model="multipleValue"
+        v-if="multiple"
       >
         <template #suffix>
           <lay-icon
@@ -124,7 +138,9 @@ const handleClick = (node: any) => {
             :data="data"
             :onlyIconControl="true"
             :show-checkbox="multiple"
-            v-model:checkedKeys="selectedValue"
+            :check-strictly="checkStrictly"
+            v-model:selectedKey="selectedValue"
+            v-model:checkedKeys="checkedKeys"
             @node-click="handleClick"
           ></lay-tree>
         </div>