持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

根据element中的transfer穿梭框自定义封装了一个三栏的穿梭框，如果需要使用该组件，目前暂时还需引入element相关的样式等（后续优化尽量使其脱离element框架使用），下面是使用该框架一些api，以供方便使用

npm i vue-transfer-three安装下载

例子

<template>
    <div id="app">
        <transferThree ref="transferThree" :data="data" :leftData="leftData" :rightData="rightData" :titles="titles" :left-default-checked="['1001']" :source-default-checked="[1,2]" :right-default-checked="['101']" filterable filter-placeholder="请输入要。。。。" :filter-method="filterMethod" :render-content="renderFunc" @left-check-change="leftCheckChange"> </transferThree>
        <el-button @click="clearFn()">重置</el-button>
    </div>
</template>

<script>

import transferThree from 'vue-transfer-three/packages/transferThree'

export default {
    name: 'App',
    components: {
        transferThree
    },

    data(){
        const generateData = _ => {
            const data = [];
            for (let i = 1; i <= 15; i++) {
                data.push({ key: i, label: `备选项 ${ i }`, pinyin: `备选项 ${ i }`
               });
            }
           return data;
        };

    return {
        data: generateData(),
        rightData:[{ key:'101',label:'测试101',pinyin:'测试101'},{ key:'102',label:'测试102',pinyin:'测试102'}],
        leftData:[{ key:'1001',label:'测试1001', pinyin:'测试1001'},{ key:'1002',label:'测试1002',pinyin:'测试1002'}],
        value: [1, 4],
        titles:['列表1','列表2','列表3'],
        filterMethod(query, item) {
            return item.pinyin.indexOf(query) > -1;
        },
        renderFunc(h, option) {
            return <span>{ option.key } - { option.label }</span>;
        }
    };
    },

    methods:{
        clearFn(){
            this.$nextTick(() => {
                // this.$refs.transferThree.clearQuery('left')
                // this.$refs.transferThree.clearQuery('middle')
                this.$refs.transferThree.clearQuery('right')
            })
        },

        leftCheckChange(val,keys){
            console.log('val',val);
            console.log('keys',keys);
        }
    }

}

</script>

vue-transfer-three 三栏穿梭框

Attributes

参数	说明	类型	可选值	默认值
data	中间Transfer的数据源	array[{ key, label, disabled }]	—	[ ]
leftData	左边Transfer的数据源	array[{ key, label, disabled }]	—	[ ]
rightData	右边Transfer的数据源	array[{ key, label, disabled }]	—	[ ]
titles	自定义列表标题	array	—	['列表 1', '列表 2'，'列表 3']
left-default-checked	初始状态下左侧列表的已勾选项的 key 数组	array	—	[ ]
source-default-checked	初始状态下中间列表的已勾选项的 key 数组	array	—	[ ]
right-default-checked	初始状态下右侧列表的已勾选项的 key 数组	array	—	[ ]
filterable	是否可搜索	boolean	—	false
filter-placeholder	搜索框占位符	string	—	请输入搜索内容
filter-method	自定义搜索方法	function	—	—
render-content	自定义数据项渲染函数	function(h, option)	—	—

Slot

name	说明
left-footer	左侧列表底部的内容
source-footer	中间列表底部的内容
right-footer	右侧列表底部的内容

Methods

方法名	说明	参数
clearQuery	清空某个面板的搜索关键词	'left' / 'middle' /'right'，指定需要清空的面板

Events

事件名称	说明	回调参数
change	列表元素发生变化时触发	数据移动的方向、发生移动的数据key数组 、左侧数据列表、中间数据列表、右边数据列表
left-check-change	左侧列表元素被用户选中 / 取消选中时触发	当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组
middle-check-change	中间列表元素被用户选中 / 取消选中时触发	当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组
right-check-change	右侧列表元素被用户选中 / 取消选中时触发	当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组