Transfer 穿梭框 UPDATE
一种数据输入类的组件,两栏布局的组件,用直观的方式在两栏中移动元素,让用户感知到对数据的选择与处理,完成选择行为。
API
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
target-clearable | 目标列表配置是否可删除按钮 | Boolean | — | | V2.2.8 |
one-way | 单向 | Boolean | — | | V2.2.8 |
simple | 简单模式 | Boolean | — | | V2.2.8 |
pagination | 传入 Pagination 的配置,通过数组为左右列表传入不同属性 | Object / Array | — | | V2.2.8 |
button-texts | 自定义按钮文案 | Array | — | [ ] | |
data | Transfer 的数据源 | Array[{ key, label, disabled }] | — | [ ] | |
filterable | 是否可搜索 | Boolean | — | false | |
filter-placeholder | 搜索框占位符 | String | — | 请输入搜索内容 | |
filter-method | 自定义搜索方法 | Function | — | — | |
format | 列表顶部勾选状态文案 | Object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } | |
left-default-checked | 初始状态下左侧列表的已勾选项的 key 数组 | Array | — | [ ] | |
props | 数据源的字段别名 | Object{key, label, disabled} | — | — | |
render-content | 自定义数据项渲染函数 | Function(h, option) | — | — | |
right-default-checked | 初始状态下右侧列表的已勾选项的 key 数组 | Array | — | [ ] | |
titles | 自定义列表标题 | Array | — | ['源列表', '目标列表'] | |
target-order | 右侧列表元素的排序策略:若为 original ,则保持与数据源相同的顺序;若为 push ,则新加入的元素排在最后;若为 unshift ,则新加入的元素排在最前 | String | 'original' | 'push' | 'unshift' | 'original' | |
value / v-model | 绑定值 | Array | — | — | |
panel-width | 自定义面板宽度 | Array | — | [ ] | V2.2.15 |
selectable | 是否开启选择器 | Boolean | — | false | V2.3.2 |
show-table | 是否显示表格 | Boolean | — | false | V2.3.2 |
Events
事件名称 | 说明 | 回调参数 | Version |
change | 右侧列表元素变化时触发 | 当前值、数据移动的方向('left' | 'right')、发生移动的数据 key 数组 | |
page-change | 分页发生变化时触发 | 当前页、列表类型 | |
left-check-change | 左侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 | |
right-check-change | 右侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 | |
left-search | 左侧列表顶部搜索事件 | 当前输入框的值 | V2.3.2 |
right-search | 右侧列表顶部搜索事件 | 当前输入框的值 | V2.3.2 |
Methods
方法名 | 说明 | 参数 |
clearQuery | 清空某个面板的搜索关键词 | 'left' | 'right',指定需要清空的面板 |
Slots
name | 说明 |
left-footer | 左侧列表底部的内容 |
right-footer | 右侧列表底部的内容 |
— | 自定义数据项的内容,参数为 { option } |
上次更新: 4/17/2024, 5:12:42 PM