feat(transfer): [transfer] adds the ability to customize the panel width for the transfer component (#3285)

* fix(transfer):  add custom panel's size

* fix(transfer):  document on adding custom panel size functionality

* fix(transfer): 添加组合式的示例

* fix(transfer): remove comment

Author: shenjunjian

examples/sites/demos/apis/transfer.js

@@ -287,6 +287,51 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'basic-usage'
+        },
+        {
+          name: 'panel-style',
+          type: 'Object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '指定左右面板容器的样式,当面板的宽度大于外部容器的50%宽度时，面板会自适应容器的宽度。',
+            'en-US':
+              "Specify the style of the left and right panel containers. When the width of the panel is greater than 50% of the external container's width, the panel will adapt to the width of the container"
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-size',
+          meta: {
+            stable: '3.23.0'
+          }
+        },
+        {
+          name: 'panel-body-style',
+          type: 'Object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '指定面板内容区域的样式',
+            'en-US': 'Specify the style of the content area of the designated panel.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-size',
+          meta: {
+            stable: '3.23.0'
+          }
+        },
+        {
+          name: 'panel-table-height',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '嵌套表格时，设置表格的高度值。嵌套表格的默认高度为400px, 当自定义面板内容区域的高度之后，可能会与表格高度不匹配。 可以通过该属性设置一个匹配的表格高度。',
+            'en-US':
+              'When nesting tables, set the height value of the table. The default height of a nested table is 400px. After customizing the height of the panel content area, it may not match the height of the table. You can use this property to set a matching table height.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-size',
+          meta: {
+            stable: '3.23.0'
+          }
         }
       ],
       events: [

examples/sites/demos/pc/app/transfer/custom-size-composition-api.vue

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <tiny-transfer
+      v-model="listValue"
+      :data="listData"
+      filterable
+      :panelStyle="panelStyle"
+      :panelBodyStyle="panelBodyStyle"
+    ></tiny-transfer>
+    <br />
+    <br />
+    <tiny-transfer
+      v-model="treeValue"
+      :props="{ key: 'id', disabled: 'disabled' }"
+      :tree-op="treeConfig"
+      filterable
+      :data="treeData"
+      :render="renderTree"
+      :panelStyle="panelStyle"
+      :panelBodyStyle="panelBodyStyle"
+    ></tiny-transfer>
+    <br />
+    <br />
+    <tiny-transfer
+      v-model="gridValue"
+      :render="renderGrid"
+      :data="gridData"
+      filter-placeholder="请输入城市拼音"
+      filterable
+      :props="{ key: 'id', disabled: 'disabled' }"
+      :columns="columns"
+      :pager-op="pagerOp"
+      :show-pager="true"
+      :filter-method="filterMethod"
+      :panelStyle="panelStyle"
+      :panelBodyStyle="panelBodyStyle"
+      :panelTableHeight="panelTableHeight"
+    ></tiny-transfer>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyTransfer, TinyTable, TinyTree } from '@opentiny/vue'
+
+const generateData = () => {
+  const data = []
+
+  for (let i = 0; i <= 15; i++) {
+    data.push({
+      key: i,
+      label: `备选项 ${i}`
+    })
+  }
+
+  return data
+}
+const getGridData = () => {
+  const data = []
+
+  for (let i = 1; i <= 10; i++) {
+    data.push({
+      id: i.toString(),
+      name: 'GFD 科技 YX 公司 ' + i,
+      area: '华东区 ' + i,
+      disabled: i % 4 === 0
+    })
+  }
+
+  return data
+}
+// 自定义面板样式
+const panelStyle = ref({ width: '650px' })
+const panelBodyStyle = ref({ height: '200px' })
+const panelTableHeight = ref('700px')
+
+// 列表示例
+const listData = ref(generateData())
+const listValue = ref([1, 4])
+
+// tree 示例
+const treeValue = ref([3, 4, 5])
+const renderTree = ref({
+  plugin: TinyTree
+})
+const treeData = ref([
+  {
+    id: 1,
+    label: '一级 1',
+    children: [
+      {
+        id: 4,
+        label: '二级 1-1',
+        children: [
+          {
+            id: 9,
+            label: '三级 1-1-1'
+          },
+          {
+            id: 10,
+            label: '三级 1-1-2'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 2,
+    label: '一级 2',
+    children: [
+      {
+        id: 5,
+        label: '二级 2-1'
+      },
+      {
+        id: 6,
+        label: '二级 2-2',
+        disabled: true
+      }
+    ]
+  },
+  {
+    id: 3,
+    label: '一级 3',
+    children: [
+      {
+        id: 7,
+        label: '二级 3-1',
+        disabled: true
+      },
+      {
+        id: 8,
+        label: '二级 3-2'
+      }
+    ]
+  }
+])
+const treeConfig = ref({
+  showLine: true,
+  showCheckbox: true,
+  nodeKey: 'id',
+  checkStrictly: true,
+  filterNodeMethod(query, data) {
+    return data.label.includes(query)
+  }
+})
+
+// grid 示例
+const renderGrid = ref({
+  plugin: TinyTable
+})
+const gridValue = ref(['5', '6', '10'])
+const gridData = ref(getGridData())
+const columns = ref([
+  {
+    type: 'index',
+    width: '30px'
+  },
+  {
+    type: 'selection',
+    width: '30px'
+  },
+  {
+    field: 'name',
+    title: '名称'
+  },
+  {
+    field: 'area',
+    title: '所属区域'
+  }
+])
+const pagerOp = ref({
+  pageVO: {
+    pageSizes: [10, 20, 30],
+    pageSize: 10
+  }
+})
+function filterMethod(query, item) {
+  return item.name.includes(query)
+}
+</script>