iview 之 穿梭框 transfer

概述

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

说明

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

  • :data:总体数据,数组,每项为一个对象,且必须含有 key 值,组件基于此做索引。
  • :target-keys:目标列索引集合,数组,每项为数据的 key 值,Transfer 会将含有这些 key 值的数据筛选到右边。  (注意是 key 的集合)
  • :render-format:每行数据显示的格式函数,默认优先显示 label 值,没有时显示 key 值,可以自己组合出需要的数据格式。
  • @on-change:当点击转移按钮时,组件本身并不会转移数据,而是触发事件,由用户来操作数据。

Transfer events


事件名说明返回值
on-change 选项在两栏之间转移时的回调函数 targetKeys, direction, moveKeys
on-selected-change 选中项发生变化时触发 sourceSelectedKeys, targetSelectedKeys
原文地址:https://www.cnblogs.com/sweet-ice/p/10615780.html