Vue Element Transfer 穿梭框使用
实现效果图主要希望能在点击左右交换的时候,能够监听事件,并即时提交至后台首先,使用组件<h5 class="title">关联菜单元素管理</h5><div class="block menu-element-block"><el-transfer...
·
实现效果图
主要希望能在点击左右交换的时候,能够监听事件,并即时提交至后台
首先,使用组件
<h5 class="title">关联菜单元素管理</h5>
<div class="block menu-element-block">
<el-transfer
v-model="menuelementvalue"
:data="elementdata"
:titles="['已关联菜单元素', '未关联菜单元素']"
:button-texts="['绑定', '解绑']"
@change="transferChange"
></el-transfer>
</div>
data return 初始数据
menuelementvalue: [],
elementdata: []
js部分
Arr.forEach(item => {
let obj = {}
this.$set(obj, 'key', this.elementdata.length)
this.$set(obj, 'label', item.name)
this.$set(obj, 'id', item.id)
this.elementdata.push(obj)
})
change监听事件
/** 穿梭框数据改变时**/
transferChange(value, direction, keyArr) {
//value为选中值,direction为方向left or right,keyArr为右边框的key数组
switch (direction) {
case 'left':
keyArr.forEach((item, index) => {
//你的提交后台事件,elementdata[index].id即为选中的其中一个元素的id,循环获得所有。
})
break
case 'right':
keyArr.forEach((item, index) => {
//你的提交后台事件事件
})
break
}
},
更多推荐
已为社区贡献3条内容
所有评论(0)