Transfer 穿梭框 ​

双栏穿梭选择框，用于将数据在左右两栏之间来回移动，常用于多项数据的批量选择与管理。

ts
import { createApp } from 'vue'
import { Transfer as ElTransfer } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElTransfer)

基础用法 ​

<template>
  <el-transfer v-model="value" :data="data" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Transfer as ElTransfer } from '@szhn/dh-design-pc'


interface Option {
  key: number
  label: string
  disabled: boolean
}

const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([])
</script>

可搜索过滤 ​

在数据很多的情况下，可以对数据进行搜索和过滤。

<template>
  <el-transfer
    v-model="value"
    filterable
    :filter-method="filterMethod"
    filter-placeholder="State Abbreviations"
    :data="data"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Transfer as ElTransfer } from '@szhn/dh-design-pc'


interface Option {
  key: number
  label: string
  initial: string
}

const generateData = () => {
  const data: Option[] = []
  const states = [
    'California',
    'Illinois',
    'Maryland',
    'Texas',
    'Florida',
    'Colorado',
    'Connecticut ',
  ]
  const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
  states.forEach((city, index) => {
    data.push({
      label: city,
      key: index,
      initial: initials[index],
    })
  })
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([])

const filterMethod = (query: string, item: Option) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}
</script>

自定义 ​

可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。

<template>
  <p style="text-align: center; margin: 0 0 20px">
    Customize data items using render-content
  </p>
  <div style="text-align: center">
    <el-transfer
      v-model="leftValue"
      style="text-align: left; display: inline-block"
      filterable
      :left-default-checked="[2, 3]"
      :right-default-checked="[1]"
      :render-content="renderFunc"
      :titles="['Source', 'Target']"
      :button-texts="['To left', 'To right']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
      :data="data"
      @change="handleChange"
    >
      <template #left-footer>
        <el-button class="transfer-footer" size="small">Operation</el-button>
      </template>
      <template #right-footer>
        <el-button class="transfer-footer" size="small">Operation</el-button>
      </template>
    </el-transfer>
    <p style="text-align: center; margin: 50px 0 20px">
      Customize data items using scoped slot
    </p>
    <div style="text-align: center">
      <el-transfer
        v-model="rightValue"
        style="text-align: left; display: inline-block"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['Source', 'Target']"
        :button-texts="['To left', 'To right']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        :data="data"
        @change="handleChange"
      >
        <template #default="{ option }">
          <span>{{ option.key }} - {{ option.label }}</span>
        </template>
        <template #left-footer>
          <el-button class="transfer-footer" size="small">Operation</el-button>
        </template>
        <template #right-footer>
          <el-button class="transfer-footer" size="small">Operation</el-button>
        </template>
      </el-transfer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TransferDirection, TransferKey, renderContent } from '@szhn/dh-design-pc'
import { Button as ElButton, Transfer as ElTransfer } from '@szhn/dh-design-pc'


interface Option {
  key: number
  label: string
  disabled: boolean
}

const generateData = (): Option[] => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref(generateData())
const rightValue = ref([1])
const leftValue = ref([1])

const renderFunc: renderContent = (h, option) => h('span', null, option.label)

const handleChange = (
  value: TransferKey[],
  direction: TransferDirection,
  movedKeys: TransferKey[]
) => {
  console.log(value, direction, movedKeys)
}
</script>

<style>
.transfer-footer {
  margin-left: 15px;
  padding: 6px 5px;
}
</style>

自定义空内容 (2.9.0) ​

您可以自定义列表为空或未找到筛选结果时显示的内容。

<template>
  <el-transfer v-model="value" :data="data">
    <template #left-empty>
      <el-empty :image-size="60" description="No data" />
    </template>
    <template #right-empty>
      <el-empty :image-size="60" description="No data" />
    </template>
  </el-transfer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Empty as ElEmpty, Transfer as ElTransfer } from '@szhn/dh-design-pc'


interface DataItem {
  key: number
  label: string
  disabled: boolean
}
const generateData = (): DataItem[] => {
  const data: DataItem[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref(generateData())
const value = ref([])
</script>

数据项属性别名 ​

默认情况下，Transfer 仅能识别数据项中的 key、label 和 disabled 字段。 如果你的数据的字段名不同，可以使用 props 属性为它们设置别名。

<template>
  <el-transfer
    v-model="value"
    :props="{
      key: 'value',
      label: 'desc',
    }"
    :data="data"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Transfer as ElTransfer } from '@szhn/dh-design-pc'


interface Option {
  value: number
  desc: string
  disabled: boolean
}

const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      value: i,
      desc: `Option ${i}`,
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([])
</script>

Transfer API ​

Transfer Attributes ​

属性名说明类型默认值
model-value / v-model选中项绑定值array[]
dataTransfer 的数据源array[]
filterable是否可搜索booleanfalse
filter-placeholder搜索框占位符string—
filter-method自定义搜索方法Function—
target-order右侧列表元素的排序策略： 若为 original，则保持与数据源相同的顺序； 若为 push，则新加入的元素排在最后； 若为 unshift，则新加入的元素排在最前enumoriginal
titles自定义列表标题array[]
button-texts自定义按钮文案array[]
render-content自定义数据项渲染函数object—
format列表顶部勾选状态文案object{}
props数据源的字段别名object—
left-default-checked初始状态下左侧列表的已勾选项的 key 数组array[]
right-default-checked初始状态下右侧列表的已勾选项的 key 数组array[]
validate-event是否触发表单验证booleantrue

Transfer Events ​

事件名说明类型
change右侧列表元素变化时触发Function
left-check-change左侧列表元素被用户选中 / 取消选中时触发Function
right-check-change右侧列表元素被用户选中 / 取消选中时触发Function

Transfer Slots ​

插槽名说明类型
default自定义数据项的内容，object
left-footer左侧列表底部的内容—
right-footer右侧列表底部的内容—
left-empty 2.9.0左侧面板为空或没有数据符合筛选条件时的内容—
right-empty 2.9.0右侧面板为空或没有数据符合筛选条件时的内容—

Transfer Exposes ​

名称说明类型
clearQuery清空某个面板的搜索关键词Function
leftPanel左侧面板 refobject
rightPanel右侧面板 refobject

Transfer Panel API ​

Transfer Panel Exposes ​

名称描述Type
query过滤关键词string