不废话直接开始看一个适用度比较高的基本的代码
<div>
<div>配置适用大类</div>
<div class="scollbox" style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block"
v-model="checked"
:data="transferData"
@change="getObject"
:titles="['全部大类', '已选大类']"
:button-texts="['', '']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}">
</el-transfer>
</div>
</div>
这段代码的展示图:
参数解释:(只解释用得上的,因为没用上的我也不知道)
v-model:右边的穿梭框的值
:data:穿梭框的数据,就类似于Table表格的tableData,是一个对象数组,
key 为数据的唯一性标识,label 为显示文本(如上面的格力)
@change:每次穿梭框数据发生改变时触发的函数(左边到右边右边到左边)
:titles:两边穿梭框的标题的
所以,我们可以通过一个函数,将查询的数据遍历,然后将我们需要的数据添加到 transferData这个数组里面:例子如下:
//查询所有大类
selAllProduc(){
//暂存我们的数据
this.data=[]
this.allProduc=[]
this.$http.get("/productHigh/getAll").then(resp=>{
//接收后端返回的数据
this.allProduc=resp.data.data
//循环这个数组
for(var i=0;i<this.allProduc.length;i++){
//往这个数组中添加对象:有两个属性,key和label,上面解释这两个属性是什么意义
this.data.push({
key:this.allProduc[i].productId,
label:this.allProduc[i].productName,
})
}
//赋给穿梭框的数据数组
this.transferData = this.data;
console.log(this.transferData)
})
},
每次右边穿梭框发生改变时触发的函数:
getObject() {
console.log("选中的数据有" + this.checked)
},
如果初始化穿梭框的时候,右边需要有值,我们可以直接往v-modeld绑定的数组里面添加 transferData里对象的key的值即可,这样他会自动把右边已经有的数据转移到右边:
代码:
效果图:
大致就是这样,如有错误请指正,不明白的可以私信我