layui/package/document-component/src/document/zh-CN/components/transfer.md

::: anchor
:::

::: title 基础使用
:::

::: describe 常用于行数据的交互筛选，在浩瀚的业务需求中，值得一用。
:::

::: title 基础使用
:::

::: demo 使用 `lay-transfer` 标签, 创建穿梭框

<template>
  <lay-transfer :dataSource="dataSource1"></lay-transfer>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const dataSource1 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]

    return {
      dataSource1
    }
  }
}
</script>

:::

::: title 指定标题
:::

::: demo

<template>
  <lay-transfer :dataSource="dataSource2" :title="title"></lay-transfer>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const dataSource2 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
    const title = ['我喜欢的','我不喜欢的']

    return {
      dataSource2,
      title
    }
  }
}
</script>

:::

::: title 使用插槽
:::

::: demo

<template>
  <lay-transfer :dataSource="dataSource3">
    <template v-slot:item="{ data }">
      {{data.id}}
    </template>
  </lay-transfer>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const dataSource3 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]

    return {
      dataSource3
    }
  }
}
</script>

:::


::: title 开启搜索
:::

::: demo

<template>
  <lay-transfer :dataSource="dataSource5" :showSearch="true"></lay-transfer>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const dataSource5 = [
      {id:'1', title:'无影剑'},
      {id:'2', title:'逸龙剑'},
      {id:'3', title:'精灵之语'},
      {id:'4', title:'十字斩刀-斗'},
      {id:'5', title:'落炎魔杖'},
      {id:'6', title:'石中剑'},
      {id:'7', title:'屠戮之刃'}
    ]
    
    return {
      dataSource5
    }
  }
}
</script>

::: 

::: title 海量数据
:::

::: demo

<template>
  <lay-transfer :dataSource="dataSource4"></lay-transfer>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const dataSource4 = [
      {id:'1', title:'无影剑'},
      {id:'2', title:'逸龙剑'},
      {id:'3', title:'精灵之语'},
      {id:'4', title:'十字斩刀-斗'},
      {id:'5', title:'落炎魔杖'},
      {id:'6', title:'石中剑'},
      {id:'7', title:'屠戮之刃'},
      {id:'8', title:'无影剑'},
      {id:'9', title:'逸龙剑'},
      {id:'10', title:'精灵之语'},
      {id:'11', title:'十字斩刀-斗'},
      {id:'12', title:'落炎魔杖'},
      {id:'13', title:'石中剑'},
      {id:'14', title:'屠戮之刃'},
      {id:'15', title:'落炎魔杖'},
      {id:'16', title:'石中剑'},
      {id:'17', title:'屠戮之刃'},
      {id:'18', title:'无影剑'},
      {id:'19', title:'逸龙剑'},
      {id:'20', title:'精灵之语'},
      {id:'21', title:'十字斩刀-斗'},
      {id:'22', title:'落炎魔杖'},
      {id:'23', title:'石中剑'},
      {id:'24', title:'屠戮之刃'}
    ]
    
    return {
      dataSource4
    }
  }
}
</script>

:::

::: title 底部插槽
:::

::: demo

<template>
  <lay-transfer :dataSource="dataSource5">
    <template v-slot:leftFooter>左侧底部</template>
    <template v-slot:rightFooter>右侧底部</template>
  </lay-transfer>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const dataSource5 = [
      {id:'1', title:'无影剑'},
      {id:'2', title:'逸龙剑'},
      {id:'3', title:'精灵之语'},
      {id:'4', title:'十字斩刀-斗'},
      {id:'5', title:'落炎魔杖'},
      {id:'6', title:'石中剑'},
      {id:'7', title:'屠戮之刃'}
    ]
    
    return {
      dataSource5
    }
  }
}
</script>

::: 

::: title Transfer 属性
:::

::: table

| Name       | Description | Accepted Values |
| ---------- | ----------- | --------------- |
| dataSource | 数据来源    | --              |
| title      | 标题        | --              |
| id         | 主键        | --              |
| showSearch | 开启搜索        | --              |
| width      | 左右盒子宽度        | `200px`              |
| height     | 左右盒子高度        |  `360px`              |

:::

::: title Transfer 插槽
:::

::: table

| Name | Description | Accepted Values |
| ---- | ----------- | --------------- |
| item | 列表项      | { data }        |
| leftFooter | 左侧盒子底部内容      | --      |
| rightFooter | 右侧盒子底部内容      | --        |

:::

::: contributor transfer
:::

::: previousNext transfer
:::