Transfer 穿梭框

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

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

    • :target-keys:目标列索引集合,数组,每项为数据的 key 值,Transfer 会将含有这些 key 值的数据筛选到右边。
    • :render-format:每行数据显示的格式函数,默认优先显示 label 值,没有时显示 key 值,可以自己组合出需要的数据格式。
    • :当点击转移按钮时,组件本身并不会转移数据,而是触发事件,由用户来操作数据。示例:

    基础用法

    Transfer 穿梭框 - 图2

    搜索

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

    高级用法

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

    自定义渲染行数据

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