list-list穿梭框组件
- 从一个集合中选出子集合
从npm安装ct-adc-transfers
npm install ct-adc-transfers --save
在代码中使用
import transfer from 'ct-adc-transfers';
Vue.component(transfer.name, transfer);
或
new Vue({
el: '#app',
components: {
transfer
}
})
| 参数 | 说明 | 类型 | 默认值 | 可选值 | 描述 |
|---|---|---|---|---|---|
| dataSource | 原始数据 | Array | [] | 即数据集合 | |
| selectedItems | 已选择的列表(右边的数据) | Array | [] | 没有时请传[]，有值的情况下每一项需和dataSource中的一致(key可以少，但matchKey必须要有) | |
| matchKey | 自动匹配输入时可被匹配的key | Array | ['Id'] | ||
| showKey | 数据列表中显示哪些key | Array | ['Name'] | 显示在单个列表项中的key，如果key有多个,组件采用'-'进行分割内容 | |
| leftLoading | 左侧列表加载状态 | Boolean | false | ||
| rightLoading | 右侧列表加载状态 | Boolean | false | ||
| button | 按钮的html内容 | Object(button.toLeft / button.toRight) | 左右箭头图标 | ||
| leftListTitle | 左侧列表的title | String | '全部列表' | ||
| rightListTitle | 右侧列表中的title | String | '已选择列表' |
事件名称 | 说明 | 回调参数 | 描述 change | 选中值发生改变 | 右边的列表数据 | 当穿梭框的'向左'/'向右'被执行后触发该事件。
无
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent