关于iview的穿梭框Transfer基本使用

效果图

<-- 这是html部分 -->
<Transfer
        :data="data1"
        :target-keys="targetKeys1"
        :render-format="render1"
        :operations="['源列表','目的列表']"
        @on-change="handleChange1">
</Transfer>

// 这是 js初始化数据
        data () {
            return {
                data1: [],
                targetKeys1:[]
            }
        },
// 这是方法
// 这个方法主要是显示数据的，例如上图的 ‘Content1’
            render1 (item) {
                return item.label;
            },
            这个是当数据发生改变时触发
            handleChange1 (newTargetKeys, direction, moveKeys) {
                console.log(newTargetKeys);
                console.log(direction);
                console.log(moveKeys);
                this.targetKeys1 = newTargetKeys;
            },
            // 获取数据
			getdata (){
			let a = []
			let b= []
			for(let i=0; i<10 ; i++){
			// 将所有数据放进a里面  
				a.push({
						key: i.toString(),
                        label: 'Content ' + i
					})
			// 将符合规则的放到 b里面，只放 key
				if(i%2 >1 ){
					b.push( i.toString())
				}
			}
			// 将a和b分别赋值给 左侧数据和右侧数据
			this.data1 = a
            this.targetKeys1 = b
		}

如果想对穿梭框里面的值做不可穿梭处理

            // 获取数据
			getdata (){
			let a = []
			let b= []
			for(let i=0; i<10 ; i++){
			// 将所有数据放进a里面  
			// 如果 disabled的值为 true ，那么这条数据不可穿梭，如果该数据的key在侧数组中，那么这条数据显示到右侧数组中，左侧则反之。
				a.push({
						key: i.toString(),
                        label: 'Content ' + i,
                        disabled: 将这个是设为判定条件及‘true’/ ‘false’
					})
			// 将符合规则的放到 b里面，只放 key
				if(i%2 >1 ){
					b.push( i.toString())
				}
			}
			// 将a和b分别赋值给 左侧数据和右侧数据
			this.data1 = a
            this.targetKeys1 = b
		}

关于穿梭框可搜索 filterable

不自定义搜索

代码如下，显示可搜索框 ，如果不自定义搜索方法默认搜索
data1里面的label 属性

<Transfer
        :data="data1"
        :target-keys="targetKeys1"
        :render-format="render1"
        filterable
        @on-change="handleChange1">
</Transfer>

自定义搜索

代码如下，显示可搜索框，可在

<Transfer
        :data="data1"
        :target-keys="targetKeys1"
        :render-format="render1"
        filterable
        :filter-method="search"
        @on-change="handleChange1">
</Transfer>
//  方法
// data 为项，query 为当前输入的搜索词
	search(data,query){
	//选择好的集合
		let a = []
		// 做筛选
		console.log(data)
		console.log(query)
		return a
	}