Transfer 穿梭框

概述

双栏穿梭选择框,常用于将多个项目从一边移动到另一边。

说明

Transfer 组件主要基于以下四个 API 来使用:

  • :data:总体数据,数组,每项为一个对象,且必须含有 key 值,组件基于此做索引。
  • :target-keys:目标列索引集合,数组,每项为数据的 key 值,Transfer 会将含有这些 key 值的数据筛选到右边。
  • :render-format:每行数据显示的格式函数,默认优先显示 label 值,没有时显示 key 值,可以自己组合出需要的数据格式。
  • @on-change:当点击转移按钮时,组件本身并不会转移数据,而是触发事件,由用户来操作数据。
    示例:
  1. export default {
  2. data () {
  3. return {
  4. data: [
  5. { "key": "1", "label": "Content 1", "disabled": false },
  6. { "key": "2", "label": "Content 2", "disabled": true },
  7. { "key": "3", "label": "Content 3", "disabled": false }
  8. ],
  9. targetKeys: ["1","2"]
  10. }
  11. },
  12. methods: {
  13. render (item) {
  14. return item.key + ':' + item.label;
  15. },
  16. onChange (newTargetKeys) {
  17. this.targetKeys = newTargetKeys;
  18. }
  19. }
  20. }

代码示例

Transfer 穿梭框 - 图1

基础用法

基本用法,展示了 datatarget-keys、每行的渲染函数 render-format 以及回调函数 on-change 的用法。

  1. <template>
  2. <Transfer
  3. :data="data1"
  4. :target-keys="targetKeys1"
  5. :render-format="render1"
  6. @on-change="handleChange1"></Transfer>
  7. </template>
  8. <script>
  9. export default {
  10. data () {
  11. return {
  12. data1: this.getMockData(),
  13. targetKeys1: this.getTargetKeys()
  14. }
  15. },
  16. methods: {
  17. getMockData () {
  18. let mockData = [];
  19. for (let i = 1; i <= 20; i++) {
  20. mockData.push({
  21. key: i.toString(),
  22. label: 'Content ' + i,
  23. description: 'The desc of content ' + i,
  24. disabled: Math.random() * 3 < 1
  25. });
  26. }
  27. return mockData;
  28. },
  29. getTargetKeys () {
  30. return this.getMockData()
  31. .filter(() => Math.random() * 2 > 1)
  32. .map(item => item.key);
  33. },
  34. render1 (item) {
  35. return item.label;
  36. },
  37. handleChange1 (newTargetKeys, direction, moveKeys) {
  38. console.log(newTargetKeys);
  39. console.log(direction);
  40. console.log(moveKeys);
  41. this.targetKeys1 = newTargetKeys;
  42. }
  43. }
  44. }
  45. </script>

Transfer 穿梭框 - 图2

搜索

通过设置属性 filterable 可以进行搜索,可以自定义搜索函数。

  1. <template>
  2. <Transfer
  3. :data="data2"
  4. :target-keys="targetKeys2"
  5. filterable
  6. :filter-method="filterMethod"
  7. @on-change="handleChange2"></Transfer>
  8. </template>
  9. <script>
  10. export default {
  11. data () {
  12. return {
  13. data2: this.getMockData(),
  14. targetKeys2: this.getTargetKeys()
  15. }
  16. },
  17. methods: {
  18. getMockData () {
  19. let mockData = [];
  20. for (let i = 1; i <= 20; i++) {
  21. mockData.push({
  22. key: i.toString(),
  23. label: 'Content ' + i,
  24. description: 'The desc of content ' + i,
  25. disabled: Math.random() * 3 < 1
  26. });
  27. }
  28. return mockData;
  29. },
  30. getTargetKeys () {
  31. return this.getMockData()
  32. .filter(() => Math.random() * 2 > 1)
  33. .map(item => item.key);
  34. },
  35. handleChange2 (newTargetKeys) {
  36. this.targetKeys2 = newTargetKeys;
  37. },
  38. filterMethod (data, query) {
  39. return data.label.indexOf(query) > -1;
  40. }
  41. }
  42. }
  43. </script>

Transfer 穿梭框 - 图3

高级用法

穿梭框高级用法,可以自定义两列的宽高、操作文案,以及底部自定义操作,更多配置见 API。

  1. <template>
  2. <Transfer
  3. :data="data3"
  4. :target-keys="targetKeys3"
  5. :list-style="listStyle"
  6. :render-format="render3"
  7. :operations="['To left','To right']"
  8. filterable
  9. @on-change="handleChange3">
  10. <div :style="{float: 'right', margin: '5px'}">
  11. <Button size="small" @click="reloadMockData">Refresh</Button>
  12. </div>
  13. </Transfer>
  14. </template>
  15. <script>
  16. export default {
  17. data () {
  18. return {
  19. data3: this.getMockData(),
  20. targetKeys3: this.getTargetKeys(),
  21. listStyle: {
  22. width: '250px',
  23. height: '300px'
  24. }
  25. }
  26. },
  27. methods: {
  28. getMockData () {
  29. let mockData = [];
  30. for (let i = 1; i <= 20; i++) {
  31. mockData.push({
  32. key: i.toString(),
  33. label: 'Content ' + i,
  34. description: 'The desc of content ' + i,
  35. disabled: Math.random() * 3 < 1
  36. });
  37. }
  38. return mockData;
  39. },
  40. getTargetKeys () {
  41. return this.getMockData()
  42. .filter(() => Math.random() * 2 > 1)
  43. .map(item => item.key);
  44. },
  45. handleChange3 (newTargetKeys) {
  46. this.targetKeys3 = newTargetKeys;
  47. },
  48. render3 (item) {
  49. return item.label + ' - ' + item.description;
  50. },
  51. reloadMockData () {
  52. this.data3 = this.getMockData();
  53. this.targetKeys3 = this.getTargetKeys();
  54. }
  55. }
  56. }
  57. </script>

Transfer 穿梭框 - 图4

自定义渲染行数据

可以通过 render-format 来渲染复杂的数据。

  1. <template>
  2. <Transfer
  3. :data="data4"
  4. :target-keys="targetKeys4"
  5. :render-format="render4"
  6. @on-change="handleChange4"></Transfer>
  7. </template>
  8. <script>
  9. export default {
  10. data () {
  11. return {
  12. data4: this.getMockData(),
  13. targetKeys4: this.getTargetKeys()
  14. }
  15. },
  16. methods: {
  17. getMockData () {
  18. let mockData = [];
  19. for (let i = 1; i <= 20; i++) {
  20. mockData.push({
  21. key: i.toString(),
  22. label: 'Content ' + i,
  23. description: 'The desc of content ' + i,
  24. disabled: Math.random() * 3 < 1
  25. });
  26. }
  27. return mockData;
  28. },
  29. getTargetKeys () {
  30. return this.getMockData()
  31. .filter(() => Math.random() * 2 > 1)
  32. .map(item => item.key);
  33. },
  34. handleChange4 (newTargetKeys) {
  35. this.targetKeys4 = newTargetKeys;
  36. },
  37. render4 (item) {
  38. return item.label + ' - ' + item.description;
  39. }
  40. }
  41. }
  42. </script>

API

Transfer props

属性 说明 类型 默认值
data 数据源,其中的数据将会被渲染到左边一栏中,targetKeys 中指定的除外。 Array []
targetKeys 显示在右侧框数据的key集合 Array []
render-format 每行数据渲染函数,该函数的入参为 data 中的项 Function 默认显示label,没有时显示key
selected-keys 设置哪些项应该被选中 Array []
list-style 两个穿梭框的自定义样式 Object {}
titles 标题集合,顺序从左至右 Array ['源列表', '目的列表']
operations 操作文案集合,顺序从上至下 Array []
reverse-operation 4.2.0 是否颠倒两个操作按钮的上下顺序 Boolean false
filterable 是否显示搜索框 Boolean false
filter-placeholder 搜索框的占位 String 请输入搜索内容
filter-method 自定义搜索函数,入参为 data 和 query,data 为项,query 为当前输入的搜索词 Function 默认搜索label
not-found-text 当列表为空时显示的内容 String 列表为空

Transfer events

事件名 说明 返回值
on-change 选项在两栏之间转移时的回调函数 targetKeys, direction, moveKeys
on-selected-change 选中项发生变化时触发 sourceSelectedKeys, targetSelectedKeys

Transfer slot

名称 说明
自定义底部内容