fix(transfer): 添加tree属性支持 (#3185)

* fix(transfer): 添加tree属性支持添加tree属性对function的支持 #3123 * chore: fix composition demo * chore: fix demo --------- Co-authored-by: wū yāng <uyarnchen@gmail.com>
Tencent · Jun 20, 2024 · fa89e3e · fa89e3e
1 parent 84a4f84
commit fa89e3e
Show file tree

Hide file tree

Showing 8 changed files with 1,228 additions and 577 deletions.
diff --git a/src/transfer/_example-composition/tree.vue b/src/transfer/_example-composition/tree.vue
@@ -1,26 +1,41 @@
 <template>
-  <t-transfer
-    :data="items"
-    :search="true"
-    v-model="targetValue"
-    :checked.sync="checked"
-    @change="onChange"
-    @checked-change="handleCheckedChange"
-  >
-    <template v-slot:tree="slotProps">
-      <t-tree
-        :data="slotProps.data"
-        v-model="slotProps.value"
-        @change="slotProps.onChange"
-        checkable
-        hover
-        expand-all
-        transition
-      />
-    </template>
-  </t-transfer>
+  <t-space direction="vertical">
+    <p style="margin: 10px 0">使用插槽</p>
+    <t-transfer
+      :data="items"
+      :search="true"
+      v-model="targetValue1"
+      :checked.sync="checked1"
+      @change="onChange"
+      @checked-change="handleCheckedChange"
+    >
+      <template v-slot:tree="slotProps">
+        <t-tree
+          :data="slotProps.data"
+          v-model="slotProps.value"
+          @change="slotProps.onChange"
+          checkable
+          hover
+          expand-all
+          transition
+        />
+      </template>
+    </t-transfer>
+
+    <p style="margin: 10px 0">使用属性</p>
+    <t-transfer
+      :data="items"
+      :search="true"
+      v-model="targetValue2"
+      :checked.sync="checked2"
+      :tree="renderTree"
+      @change="onChange"
+      @checked-change="handleCheckedChange"
+    >
+    </t-transfer>
+  </t-space>
 </template>
-<script setup>
+<script setup lang='jsx'>
 import { ref } from 'vue';
 
 const items = ref([
@@ -69,8 +84,12 @@ const items = ref([
     ],
   },
 ]);
-const targetValue = ref([]);
-const checked = ref([]);
+const targetValue1 = ref([]);
+const checked1 = ref([]);
+
+const targetValue2 = ref([]);
+const checked2 = ref([]);
+
 const handleCheckedChange = ({
   checked, sourceChecked, targetChecked, type,
 }) => {
@@ -84,4 +103,6 @@ const handleCheckedChange = ({
 const onChange = (newTargetValue) => {
   console.log('onChange', newTargetValue);
 };
+
+const renderTree = (h, { data, value, onChange }) => <t-tree data={data} value={value} onChange={onChange} checkable hover expand-all transition></t-tree>;
 </script>
diff --git a/src/transfer/_example/tree.vue b/src/transfer/_example/tree.vue
@@ -1,26 +1,41 @@
 <template>
-  <t-transfer
-    :data="items"
-    :search="true"
-    v-model="targetValue"
-    :checked.sync="checked"
-    @change="onChange"
-    @checked-change="handleCheckedChange"
-  >
-    <template v-slot:tree="slotProps">
-      <t-tree
-        :data="slotProps.data"
-        v-model="slotProps.value"
-        @change="slotProps.onChange"
-        checkable
-        hover
-        expand-all
-        transition
-      />
-    </template>
-  </t-transfer>
+  <t-space direction="vertical">
+    <p style="margin: 10px 0">使用插槽</p>
+    <t-transfer
+      :data="items"
+      :search="true"
+      v-model="targetValue1"
+      :checked.sync="checked1"
+      @change="onChange"
+      @checked-change="handleCheckedChange"
+    >
+      <template v-slot:tree="slotProps">
+        <t-tree
+          :data="slotProps.data"
+          v-model="slotProps.value"
+          @change="slotProps.onChange"
+          checkable
+          hover
+          expand-all
+          transition
+        />
+      </template>
+    </t-transfer>
+
+    <p style="margin: 10px 0">使用属性</p>
+    <t-transfer
+      :data="items"
+      :search="true"
+      v-model="targetValue2"
+      :checked.sync="checked2"
+      :tree="renderTree"
+      @change="onChange"
+      @checked-change="handleCheckedChange"
+    >
+    </t-transfer>
+  </t-space>
 </template>
-<script>
+<script lang="jsx">
 export default {
   data() {
     return {
@@ -70,11 +85,16 @@ export default {
           ],
         },
       ],
-      targetValue: [],
-      checked: [],
+      targetValue1: [],
+      checked1: [],
+      targetValue2: [],
+      checked2: [],
     };
   },
   methods: {
+    renderTree(h, { data, value, onChange }) {
+      return <t-tree data={data} value={value} onChange={onChange} checkable hover expand-all transition></t-tree>;
+    },
     handleCheckedChange({
       checked, sourceChecked, targetChecked, type,
     }) {

diff --git a/src/transfer/components/transfer-list.tsx b/src/transfer/components/transfer-list.tsx
@@ -18,6 +18,7 @@ import ripple from '../../utils/ripple';
 import Search from './transfer-search';
 import { renderTNodeJSXDefault } from '../../utils/render-tnode';
 import { getKeepAnimationMixins, getClassPrefixMixins } from '../../config-provider/config-receiver';
+import props from '../props';
 
 const classPrefixMixins = getClassPrefixMixins('transfer');
 
@@ -74,6 +75,7 @@ export default mixins(keepAnimationMixins, classPrefixMixins).extend({
     checkAll: Boolean,
     t: Function,
     global: Object,
+    tree: props.tree,
     isTreeMode: {
       type: Boolean as PropType<boolean>,
       default: false,

diff --git a/src/transfer/props.ts b/src/transfer/props.ts
@@ -91,6 +91,10 @@ export default {
   transferItem: {
     type: Function as PropType<TdTransferProps['transferItem']>,
   },
+  /** 传入 Tree 组件定义树形结构 */
+  tree: {
+    type: Function as PropType<TdTransferProps['tree']>,
+  },
   /** 目标数据列表数据 */
   value: {
     type: Array as PropType<TdTransferProps['value']>,

diff --git a/src/transfer/transfer.tsx b/src/transfer/transfer.tsx
@@ -59,7 +59,7 @@ export default mixins(getConfigReceiverMixins('transfer')).extend({
     },
     isTreeMode(): boolean {
       const treeSlot = this.$scopedSlots.tree;
-      return typeof treeSlot === 'function';
+      return typeof treeSlot === 'function' || typeof this.tree === 'function';
     },
     leftButtonDisabled(): boolean {
       return this.direction === 'right';

diff --git a/src/transfer/type.ts b/src/transfer/type.ts
@@ -7,6 +7,7 @@
 import { CheckboxProps } from '../checkbox';
 import { PaginationProps, PageInfo } from '../pagination';
 import { InputProps } from '../input';
+import { TreeProps } from '../tree';
 import { TNode, KeysType } from '../common';
 
 export interface TdTransferProps<T extends DataOption = DataOption> {
@@ -88,6 +89,10 @@ export interface TdTransferProps<T extends DataOption = DataOption> {
    * 自定义渲染节点
    */
   transferItem?: TNode<TransferItem<T>>;
+  /**
+   * 传入 Tree 组件定义树形结构
+   */
+  tree?: (tree: TreeProps) => TNode;
   /**
    * 目标数据列表数据
    * @default []