热factor: tree

components/vc-tree/NodeList.tsx

@@ -94,8 +94,7 @@ export default defineComponent({
   name: 'NodeList',
   inheritAttrs: false,
   props: nodeListProps,
-  slots: ['checkable'],
+  setup(props, { expose, attrs }) {
-  setup(props, { expose, attrs, slots }) {
     // =============================== Ref ================================
     const listRef = ref(null);
     const indentMeasurerRef = ref(null);
@@ -310,7 +309,6 @@ export default defineComponent({
                   onMousemove={() => {
                     onActiveChange(null);
                   }}
-                  v-slots={slots}
                 />
               );
             }}

components/vc-tree/Tree.tsx

@@ -34,7 +34,7 @@ import classNames from '../_util/classNames';
 export default defineComponent({
   name: 'Tree',
   inheritAttrs: false,
-  slots: ['checkable'],
+  slots: ['checkable', 'title', 'icon'],
   props: initDefaultProps(treeProps(), {
     prefixCls: 'vc-tree',
     showLine: false,
@@ -982,7 +982,7 @@ export default defineComponent({
         tabindex = 0,
         selectable,
         showIcon,
-        icon,
+        icon = slots.icon,
         switcherIcon,
         draggable,
         checkable,
@@ -994,7 +994,6 @@ export default defineComponent({
         height,
         itemHeight,
         virtual,
-        titleRender,
         dropIndicatorRender,
         onContextmenu,
         onScroll,
@@ -1014,6 +1013,7 @@ export default defineComponent({
             switcherIcon,
             draggable,
             checkable,
+            customCheckable: slots.checkable,
             checkStrictly,
             disabled,
             keyEntities: keyEntities.value,
@@ -1029,7 +1029,7 @@ export default defineComponent({
             loadData,
             filterTreeNode,
 
-            titleRender,
+            titleRender: slots.title,
 
             onNodeClick,
             onNodeDoubleClick,
@@ -1084,7 +1084,6 @@ export default defineComponent({
               onScroll={onScroll}
               {...treeNodeRequiredProps.value}
               {...domProps}
-              v-slots={slots}
             />
           </div>
         </TreeContext>

components/vc-tree/TreeNode.tsx

@@ -293,7 +293,7 @@ export default defineComponent({
           )}
           onClick={onCheck}
         >
-          {slots.checkable?.()}
+          {context.value.customCheckable?.()}
         </span>
       );
     };

components/vc-tree/contextTypes.ts

@@ -41,7 +41,8 @@ export interface TreeContextProps {
   icon: IconType;
   switcherIcon: IconType;
   draggable: ((node: DataNode) => boolean) | boolean;
-  checkable: boolean | VueNode;
+  checkable: boolean;
+  customCheckable: () => any;
   checkStrictly: boolean;
   disabled: boolean;
   keyEntities: Record<Key, DataEntity>;

components/vc-tree/props.ts

@@ -132,7 +132,7 @@ export const treeProps = () => ({
   defaultSelectedKeys: { type: Array as PropType<Key[]> },
   selectedKeys: { type: Array as PropType<Key[]> },
   allowDrop: { type: Function as PropType<AllowDrop> },
-  titleRender: { type: Function as PropType<(node: DataNode) => any> },
+  // titleRender: { type: Function as PropType<(node: DataNode) => any> },
   dropIndicatorRender: {
     type: Function as PropType<
       (props: {

examples/App.vue

@@ -2,60 +2,44 @@
   <a-tree
     v-model:expandedKeys="expandedKeys"
     v-model:selectedKeys="selectedKeys"
-    v-model:checkedKeys="checkedKeys"
+    :load-data="onLoadData"
-    checkable
     :tree-data="treeData"
-  >
+  />
-    <template #title0010><span style="color: #1890ff">sss</span></template>
-  </a-tree>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
 
-const treeData: TreeDataItem[] = [
-  {
-    title: 'parent 1',
-    key: '0-0',
-    children: [
-      {
-        title: 'parent 1-0',
-        key: '0-0-0',
-        disabled: true,
-        children: [
-          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
-          { title: 'leaf', key: '0-0-0-1' },
-        ],
-      },
-      {
-        title: 'parent 1-1',
-        key: '0-0-1',
-        children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }],
-      },
-    ],
-  },
-];
-
 export default defineComponent({
   setup() {
-    const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+    const expandedKeys = ref<string[]>([]);
-    const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+    const selectedKeys = ref<string[]>([]);
-    const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+    const treeData = ref<TreeDataItem[]>([
-    watch(expandedKeys, () => {
+      { title: 'Expand to load', key: '0' },
-      console.log('expandedKeys', expandedKeys);
+      { title: 'Expand to load', key: '1' },
+      { title: 'Tree Node', key: '2', isLeaf: true },
+    ]);
+    const onLoadData = (treeNode: any) => {
+      return new Promise((resolve: (value?: unknown) => void) => {
+        if (treeNode.dataRef.children) {
+          resolve();
+          return;
+        }
+        setTimeout(() => {
+          treeNode.dataRef.children = [
+            { title: 'Child Node', key: `${treeNode.eventKey}-0` },
+            { title: 'Child Node', key: `${treeNode.eventKey}-1` },
+          ];
+          treeData.value = [...treeData.value];
+          resolve();
+        }, 1000);
       });
-    watch(selectedKeys, () => {
+    };
-      console.log('selectedKeys', selectedKeys);
-    });
-    watch(checkedKeys, () => {
-      console.log('checkedKeys', checkedKeys);
-    });
-
     return {
-      treeData,
       expandedKeys,
       selectedKeys,
-      checkedKeys,
+      treeData,
+      onLoadData,
     };
   },
 });