[fix] tree 组件完善过滤样式和虚拟滚动样式

src/common.ts

@@ -73,7 +73,7 @@ export interface HTMLElementAttributes {
   [css: string]: string;
 }
 
-export interface InfinityScroll {
+export interface TScroll {
   /**
    * 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白
    * @default 20
@@ -99,4 +99,7 @@ export interface InfinityScroll {
   type: 'lazy' | 'virtual';
 }
 
-export type TScroll = InfinityScroll;
+/**
+ * @deprecated use TScroll instead
+ */
+export type InfinityScroll = TScroll;

src/tree-select/useTreeSelect.ts

@@ -186,7 +186,10 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
     current = isObjectValue.value ? treeRef.value.getItem(nodeValue) : nodeValue;
     if (!onlyLeafNode) {
       setTreeSelectValue(current, { ...ctx, data: ctx.node.data, trigger: 'check' });
-      setInnerVisible(false, ctx);
+      setInnerVisible(false, {
+        e: ctx.e,
+        trigger: 'trigger-element-click',
+      });
     }
     innerInputValue.value && setInnerInputValue('', { trigger: 'change', e: ctx.e });
   };

src/tree/__tests__/activable.test.jsx

@@ -0,0 +1,266 @@
+import { mount } from '@vue/test-utils';
+import Tree from '@/src/tree/index.ts';
+import { delay } from './kit';
+
+describe('Tree:activable', () => {
+  vi.useRealTimers();
+  describe('props.activable', () => {
+    it('设置 activable 为 true, 节点可以具有激活态', async () => {
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+            {
+              value: 't1.2',
+            },
+          ],
+        },
+      ];
+      const wrapper = mount({
+        render() {
+          return <Tree ref="tree" data={data} activable expand-all transition={false}></Tree>;
+        },
+      });
+      await delay(1);
+      const { tree } = wrapper.vm.$refs;
+      tree.setItem('t1.1', {
+        actived: true,
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
+      tree.setItem('t1.1', {
+        actived: false,
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
+    });
+
+    it('在 data 中可以预先设置激活态', async () => {
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+              actived: true,
+            },
+            {
+              value: 't1.2',
+              actived: true,
+            },
+          ],
+        },
+      ];
+      const wrapper = mount({
+        render() {
+          return <Tree ref="tree" data={data} activable expand-all transition={false}></Tree>;
+        },
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(true);
+    });
+  });
+
+  describe('props.defaultActived', () => {
+    it('defaultActived 可以用来设置默认激活状态', async () => {
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+            {
+              value: 't1.2',
+            },
+          ],
+        },
+      ];
+      const wrapper = mount({
+        render() {
+          return <Tree ref="tree" data={data} activable defaultActived={['t1.1']} expand-all transition={false}></Tree>;
+        },
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
+    });
+  });
+
+  describe('props.actived', () => {
+    it('设置 actived 可指定激活节点', async () => {
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+            {
+              value: 't1.2',
+            },
+          ],
+        },
+      ];
+      const wrapper = mount({
+        render() {
+          return <Tree ref="tree" data={data} activable actived={['t1.1']} expand-all transition={false}></Tree>;
+        },
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
+    });
+
+    it('设置 actived 可变更激活节点', async () => {
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+            {
+              value: 't1.2',
+            },
+          ],
+        },
+      ];
+      const wrapper = mount({
+        data() {
+          return {
+            actived: ['t1.1'],
+          };
+        },
+        render() {
+          return <Tree ref="tree" data={data} activable actived={this.actived} expand-all transition={false}></Tree>;
+        },
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
+      wrapper.setData({
+        actived: ['t1.2'],
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(true);
+      wrapper.setData({
+        actived: ['t1'],
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
+    });
+  });
+
+  describe('props.activeMultiple', () => {
+    it('默认激活其他节点，原激活节点要取消激活状态', async () => {
+      const data = [
+        {
+          value: 't1',
+          actived: true,
+          children: [
+            {
+              value: 't1.1',
+            },
+            {
+              value: 't1.2',
+            },
+          ],
+        },
+      ];
+      const wrapper = mount({
+        render() {
+          return <Tree ref="tree" data={data} activable expand-all transition={false}></Tree>;
+        },
+      });
+      await delay(1);
+      const { tree } = wrapper.vm.$refs;
+
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
+
+      tree.setItem('t1.1', {
+        actived: true,
+      });
+
+      await delay(1);
+
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
+
+      tree.setItem('t1.2', {
+        actived: true,
+      });
+      await delay(1);
+
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(true);
+    });
+
+    it('设置 activeMultiple 为 true，节点激活状态互不关联', async () => {
+      const data = [
+        {
+          value: 't1',
+          actived: true,
+          children: [
+            {
+              value: 't1.1',
+            },
+            {
+              value: 't1.2',
+            },
+          ],
+        },
+      ];
+      const wrapper = mount({
+        render() {
+          return <Tree ref="tree" data={data} activable expand-all activeMultiple={true} transition={false}></Tree>;
+        },
+      });
+      await delay(1);
+      const { tree } = wrapper.vm.$refs;
+
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(false);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
+
+      tree.setItem('t1.1', {
+        actived: true,
+      });
+
+      await delay(1);
+
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
+
+      tree.setItem('t1.2', {
+        actived: true,
+      });
+      await delay(1);
+
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(true);
+      expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(true);
+    });
+  });
+});

src/tree/_example/activable.vue

@@ -36,23 +36,29 @@ export default {
       expandOnClickNode: false,
       items: [
         {
+          value: 't1',
           label: '1',
           children: [
             {
+              value: 't1.1',
               label: '1.1',
             },
             {
+              value: 't1.2',
               label: '1.2',
             },
           ],
         },
         {
+          value: 't2',
           label: '2',
           children: [
             {
+              value: 't2.1',
               label: '2.1',
             },
             {
+              value: 't2.2',
               label: '2.2',
             },
           ],

src/tree/_example/filter.vue

@@ -1,12 +1,17 @@
 <template>
   <t-space :size="32" direction="vertical">
     <t-form labelWidth="150">
-      <t-input-adornment prepend="filter:">
-        <t-input v-model="filterText" @change="onInput" />
-      </t-input-adornment>
+      <t-form-item label="">
+        <t-input-adornment prepend="filter:">
+          <t-input v-model="filterText" @change="onInput" />
+        </t-input-adornment>
+      </t-form-item>
       <t-form-item label="允许折叠">
         <t-switch v-model="allowFoldNodeOnFilter" @change="checkExpanded" />
       </t-form-item>
+      <t-form-item label="可选">
+        <t-switch v-model="isCheckable" />
+      </t-form-item>
     </t-form>
     <t-tree
       ref="tree"
@@ -16,6 +21,7 @@
       :allowFoldNodeOnFilter="allowFoldNodeOnFilter"
       :default-expanded="expanded"
       :filter="filterByText"
+      :checkable="isCheckable"
       hover
       line
     />
@@ -117,6 +123,7 @@ const exampleItems = [
 export default {
   data() {
     return {
+      isCheckable: false,
       filterText: '',
       filterByText: null,
       expanded: ['1.1.1'],

src/tree/_example/vscroll.vue

@@ -116,7 +116,7 @@ export default {
   computed: {
     scroll() {
       const { scrollMode } = this;
-      if (!scrollMode === 'normal') {
+      if (scrollMode === 'normal') {
         return null;
       }
       const scrollProps = {
@@ -195,4 +195,7 @@ export default {
 .tdesign-demo-vscroll .t-alert {
   margin-bottom: 5px;
 }
+.tdesign-demo-vscroll .t-tree {
+  overflow-y: auto;
+}
 </style>