docs: update tree demo (#3066)

* docs: update tree demo * chore: update snapshot --------- Co-authored-by: Uyarn <[email protected]>
Tencent · Jan 30, 2024 · e357bc4 · e357bc4
1 parent 5614574
commit e357bc4
Show file tree

Hide file tree

Showing 20 changed files with 33 additions and 91 deletions.
diff --git a/src/tree/_example/activable.vue b/src/tree/_example/activable.vue
@@ -81,15 +81,6 @@ export default {
       const { node } = context;
       console.info(node.value, 'actived:', node.actived);
     },
-    toggleActivable() {
-      this.activable = !this.activable;
-    },
-    toggleActiveMultiple() {
-      this.activeMultiple = !this.activeMultiple;
-    },
-    toggleExpandOnClickNode() {
-      this.expandOnClickNode = !this.expandOnClickNode;
-    },
   },
 };
 </script>
diff --git a/src/tree/_example/controlled.vue b/src/tree/_example/controlled.vue
@@ -177,16 +177,16 @@ export default {
       // onChange 事件发生时，context.node 状态预先发生变更，此时拿到预先变更的节点状态
       console.info(node.value, 'context.node.checked:', node.checked);
       if (this.syncProps) {
-        const checked = vals.filter((val) => {
+        const tmpChecked = vals.filter((val) => {
           if (val === '2.1') {
             console.info('节点 2.1 不允许选中');
             return false;
           }
           return true;
         });
         // 受控状态下, tree 的 props.value 可被修改为预期的值
-        console.log('before set this.checked, expect checked:', checked);
-        this.checked = checked;
+        console.log('before set this.checked, expect checked:', tmpChecked);
+        this.checked = tmpChecked;
       }
       // 赋值变更后的选中态之后，nextTick 之后触发视图更新
       // node.checked 状态发生变更，符合 tree 的 props.value 的取值

diff --git a/src/tree/_example/debug-data.vue b/src/tree/_example/debug-data.vue
@@ -126,10 +126,10 @@ export default {
   },
   methods: {
     toggleData() {
-      const items = this.items[0].value === 't1' ? data2 : data1;
-      this.items = items;
+      const tmpItems = this.items[0].value === 't1' ? data2 : data1;
+      this.items = tmpItems;
     },
-    label(createElement, node) {
+    label(h, node) {
       return node.label || node.value;
     },
   },

diff --git a/src/tree/_example/debug-performance.vue b/src/tree/_example/debug-performance.vue
@@ -75,16 +75,13 @@ function createTreeData() {
 
 export default {
   data() {
-    const items = createTreeData();
+    const initialData = createTreeData();
     return {
-      index: 0,
       transition: true,
       textInsertCount: '1',
-      useActived: false,
-      expandParent: true,
       showLine: true,
       showIcon: true,
-      items,
+      items: initialData,
     };
   },
   computed: {
@@ -94,7 +91,7 @@ export default {
     },
   },
   methods: {
-    label(createElement, node) {
+    label(h, node) {
       return `${node.value}`;
     },
 

diff --git a/src/tree/_example/debug-vscroll.vue b/src/tree/_example/debug-vscroll.vue
@@ -88,10 +88,6 @@ export default {
       index: 0,
       transition: true,
       textInsertCount: '1',
-      useActived: false,
-      enableVScroll: true,
-      lazyVScroll: false,
-      expandParent: true,
       showLine: true,
       showIcon: true,
       isCheckable: true,
@@ -119,7 +115,7 @@ export default {
     },
   },
   methods: {
-    label(createElement, node) {
+    label(h, node) {
       return `${node.value}`;
     },
     getInsertItem() {

diff --git a/src/tree/_example/disabled.vue b/src/tree/_example/disabled.vue
@@ -111,17 +111,12 @@ export default {
       ],
     };
   },
-  computed: {
-    disabledList() {
-      return this.disabledMap.keys();
-    },
-  },
   methods: {
     fnDisableCheck(node) {
       const map = this.disabledMap;
       return map.get(node.value);
     },
-    label(createElement, node) {
+    label(h, node) {
       return node.value;
     },
     setEnable(node) {

diff --git a/src/tree/_example/expand-all.vue b/src/tree/_example/expand-all.vue
@@ -102,10 +102,10 @@ export default {
   },
   methods: {
     toggleData() {
-      const items = this.items[0].value === 't1' ? data2 : data1;
-      this.items = items;
+      const tmpItems = this.items[0].value === 't1' ? data2 : data1;
+      this.items = tmpItems;
     },
-    label(createElement, node) {
+    label(h, node) {
       return node.label || node.value;
     },
   },

diff --git a/src/tree/_example/expand-mutex.vue b/src/tree/_example/expand-mutex.vue
@@ -94,12 +94,6 @@ export default {
     propOnExpand(value, context) {
       console.info('propOnExpand', value, context);
     },
-    toggleMutex() {
-      this.mutex = !this.mutex;
-    },
-    toggleExpandOnClickNode() {
-      this.expandOnClickNode = !this.expandOnClickNode;
-    },
   },
 };
 </script>
diff --git a/src/tree/_example/icon.vue b/src/tree/_example/icon.vue
@@ -40,7 +40,7 @@ export default {
     };
   },
   methods: {
-    icon(createElement, node) {
+    icon(h, node) {
       let name = 'file';
       if (node.getChildren()) {
         if (node.expanded) {

diff --git a/src/tree/_example/label.vue b/src/tree/_example/label.vue
@@ -43,9 +43,9 @@ export default {
           ],
         },
       ],
-      label(createElement, node) {
-        // 注意 vue2 和 vue3 下 createElement 的使用方法实际上存在差异
-        return createElement('strong', `value: ${node.value}, label: ${node.label}`);
+      label(h, node) {
+        // 注意 vue2 和 vue3 下 h 的使用方法实际上存在差异
+        return h('strong', `value: ${node.value}, label: ${node.label}`);
       },
     };
   },

diff --git a/src/tree/_example/lazy.vue b/src/tree/_example/lazy.vue
@@ -28,7 +28,6 @@ export default {
     return {
       checkable: true,
       checkStrictly: false,
-      value: ['1.1', '1.1.1'],
       items: [
         {
           label: '1',

diff --git a/src/tree/_example/line.vue b/src/tree/_example/line.vue
@@ -128,12 +128,6 @@ export default {
     };
   },
   methods: {
-    toggleLine() {
-      this.showLine = !this.showLine;
-    },
-    toggleIcon() {
-      this.showIcon = !this.showIcon;
-    },
     getLineNodes(node) {
       const nodes = node.getParents().reverse();
       const lineNodes = [];
@@ -160,19 +154,19 @@ export default {
       }
       return list;
     },
-    renderLine(createElement, node) {
+    renderLine(h, node) {
       if (!this.showLine) return null;
 
       const lineChildren = [];
 
-      const lines = this.getLineNodes(node).map((item) => createElement('span', {
+      const lines = this.getLineNodes(node).map((item) => h('span', {
         class: {
           'custom-line-cross': item.cross,
         },
       }));
 
       lineChildren.push(
-        createElement(
+        h(
           'div',
           {
             class: 'custom-line-box',
@@ -183,7 +177,7 @@ export default {
 
       if (node.isLeaf()) {
         const tIcon = <Icon name="heart-filled" />;
-        const iconNode = createElement(
+        const iconNode = h(
           'i',
           {
             class: 'custom-line-icon',
@@ -193,7 +187,7 @@ export default {
         lineChildren.push(iconNode);
       }
 
-      return createElement(
+      return h(
         'div',
         {
           class: this.lineClass(node),

diff --git a/src/tree/_example/load.vue b/src/tree/_example/load.vue
@@ -7,7 +7,7 @@
     <t-space>
       <t-button @click="reload()">重新加载数据</t-button>
     </t-space>
-    <t-tree :value="value" :data="items" hover expand-all :checkable="checkable" :load="load" :lazy="false" />
+    <t-tree v-model="value" :data="items" hover expand-all :checkable="checkable" :load="load" :lazy="false" />
   </t-space>
 </template>
 

diff --git a/src/tree/_example/operations.vue b/src/tree/_example/operations.vue
@@ -89,23 +89,14 @@ export default {
       ],
     };
   },
-  computed: {
-    btnSetActivedVariant() {
-      let variant = 'outline';
-      if (this.useActived) {
-        variant = 'base';
-      }
-      return variant;
-    },
-  },
   methods: {
     getLabelContent(node) {
       const pathNodes = node.getPath();
       let label = pathNodes.map((itemNode) => itemNode.getIndex() + 1).join('.');
       label = `${label} | value: ${node.value}`;
       return label;
     },
-    getLabel(createElement, node) {
+    getLabel(h, node) {
       const label = this.getLabelContent(node);
       const { data } = node;
       data.label = label;
@@ -275,9 +266,6 @@ export default {
       const { tree } = this.$refs;
       tree.remove(node.value);
     },
-    toggleExpandParent() {
-      this.expandParent = !this.expandParent;
-    },
     onChange(vals, state) {
       console.info('on change:', vals, state);
       this.checkedIds = vals;

diff --git a/src/tree/_example/state.vue b/src/tree/_example/state.vue
@@ -35,8 +35,6 @@ export default {
   data() {
     return {
       index: 2,
-      useActived: false,
-      expandParent: true,
       items: [
         {
           value: 'node1',
@@ -48,7 +46,7 @@ export default {
     };
   },
   methods: {
-    icon(createElement, node) {
+    icon(h, node) {
       const { data } = node;
       let name = 'file';
       if (node.getChildren()) {
@@ -63,7 +61,7 @@ export default {
       }
       return <Icon name={name} />;
     },
-    label(createElement, node) {
+    label(h, node) {
       const timeStamp = node.data.timeStamp || '--';
       return `${node.value}: ${timeStamp}`;
     },

diff --git a/src/tree/_example/transition.vue b/src/tree/_example/transition.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-const items = [
+const initialData = [
   {
     value: 't1',
     children: [
@@ -86,11 +86,11 @@ export default {
       transition: true,
       showLine: true,
       showIcon: true,
-      items,
+      items: initialData,
     };
   },
   methods: {
-    label(createElement, node) {
+    label(h, node) {
       return `${node.value}`;
     },
   },

diff --git a/src/tree/_example/vscroll-lazy.vue b/src/tree/_example/vscroll-lazy.vue
@@ -68,7 +68,7 @@ export default {
     };
   },
   methods: {
-    label(createElement, node) {
+    label(h, node) {
       return `${node.value}`;
     },
   },

diff --git a/src/tree/_example/vscroll.vue b/src/tree/_example/vscroll.vue
@@ -103,7 +103,6 @@ const virtualTree = createTreeData();
 export default {
   data() {
     return {
-      index: 0,
       transition: true,
       textInsertCount: '1',
       showLine: true,
@@ -119,7 +118,7 @@ export default {
     },
   },
   methods: {
-    label(createElement, node) {
+    label(h, node) {
       return `${node.value}`;
     },
     getInsertItem() {