数据输入 Data Entry

您所在的位置：网站首页 › vue穿梭框获取选中的值 › 数据输入 Data Entry

数据输入 Data Entry

2024-07-12 12:02| 来源: 网络整理| 查看: 265

穿梭框何时使用代码演示基本用法带搜索框高级用法自定义渲染行数据API事件注意穿梭框

双栏穿梭选择框。

何时使用需要在多个可选项中进行多选时。比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。

穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。

选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 source，右边一栏为 target，API 的设计也反映了这两个概念。

代码演示

基本用法

最基本的用法，展示了 dataSource、targetKeys、每行的渲染函数 render 以及回调函数 change selectChange scroll 的用法。

export default { data() { const mockData = []; for (let i = 0; i 1).map(item => item.key); return { mockData, targetKeys: oriTargetKeys, selectedKeys: ['1', '4'], disabled: false, }; }, methods: { handleChange(nextTargetKeys, direction, moveKeys) { this.targetKeys = nextTargetKeys; console.log('targetKeys: ', nextTargetKeys); console.log('direction: ', direction); console.log('moveKeys: ', moveKeys); }, handleSelectChange(sourceSelectedKeys, targetSelectedKeys) { this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]; console.log('sourceSelectedKeys: ', sourceSelectedKeys); console.log('targetSelectedKeys: ', targetSelectedKeys); }, handleScroll(direction, e) { console.log('direction:', direction); console.log('target:', e.target); }, handleDisable(disabled) { this.disabled = disabled; }, }, };

带搜索框

带搜索框的穿梭框，可以自定义搜索函数。

export default { data() { return { mockData: [], targetKeys: [], }; }, mounted() { this.getMock(); }, methods: { getMock() { const targetKeys = []; const mockData = []; for (let i = 0; i 1, }; if (data.chosen) { targetKeys.push(data.key); } mockData.push(data); } this.mockData = mockData; this.targetKeys = targetKeys; }, filterOption(inputValue, option) { return option.description.indexOf(inputValue) > -1; }, handleChange(targetKeys, direction, moveKeys) { console.log(targetKeys, direction, moveKeys); this.targetKeys = targetKeys; }, handleSearch(dir, value) { console.log('search:', dir, value); }, }, };

高级用法

穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。

reload 没数据 export default { data() { return { mockData: [], targetKeys: [], }; }, mounted() { this.getMock(); }, methods: { getMock() { const targetKeys = []; const mockData = []; for (let i = 0; i 1, }; if (data.chosen) { targetKeys.push(data.key); } mockData.push(data); } this.mockData = mockData; this.targetKeys = targetKeys; }, handleChange(targetKeys, direction, moveKeys) { console.log(targetKeys, direction, moveKeys); this.targetKeys = targetKeys; }, }, };

自定义渲染行数据

自定义渲染每一个 Transfer Item，可用于渲染复杂数据。

export default { data() { return { mockData: [], targetKeys: [], }; }, mounted() { this.getMock(); }, methods: { getMock() { const targetKeys = []; const mockData = []; for (let i = 0; i < 20; i++) { const data = { key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, chosen: Math.random() * 2 > 1, }; if (data.chosen) { targetKeys.push(data.key); } mockData.push(data); } this.mockData = mockData; this.targetKeys = targetKeys; }, renderItem(item) { const customLabel = ( {item.title} - {item.description} ); return { label: customLabel, // for displayed item value: item.title, // for title and filter matching }; }, handleChange(targetKeys, direction, moveKeys) { console.log(targetKeys, direction, moveKeys); this.targetKeys = targetKeys; }, }, }; API参数说明类型默认值dataSource数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外。[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}][][]disabled是否禁用booleanfalsefilterOption接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。(inputValue, option): booleanfooter可以设置为一个作用域插槽slot="footer" slot-scope="props"lazyTransfer 使用了 [vc-lazy-load]优化性能，这里可以设置相关参数。设为 false 可以关闭懒加载。object|boolean{ height: 32, offset: 32 }listStyle两个穿梭框的自定义样式objectlocale各种语言object{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }operations操作文案集合，顺序从上至下string[]['>', '

【本文地址】

数据输入 Data Entry

数据输入 Data Entry

今日新闻

推荐新闻