大家都知道element-ui的穿梭框是这样子的
image.png
左边的列表数据，需要通过点击中间
< 和 > 的按钮才能进行转移，今天接到个需求，说要通过双击即可将元素转移，找遍了element文档只发现有这么三个事件
image.png
根本不能满足需求，然后就在心里暗暗骂道，就那么懒吗，而且双击的话，那还要多选来干嘛，用别人的组件又不想遵循别人的规则
image.png
还是没办法，百度找了很久才发现transfer可以自定义事件
通过
render-content属性，再看了看文档才发现有略微提到这样一个属性，可是也没详细案例
image.png
百度找了下，才知道要如何自定义transfer
现附上自定义的代码结构
<template>
<el-transfer
style="display: inline-block"
v-model="edit_m.Roles"
filterable
:button-texts="['删除', '添加']"
:render-content="transferRenderFunc"
:data="edit_rolesOpenData"
></el-transfer>
</template>
<script>
export default {
methods: {
transferRenderFunc(h, option) {
var _this = this;
return h(
'span', {
attrs: {
id: option.label
},
domProps: {
innerHTML: option.label
},
on: {
click: function () {
console.log(option.key)
}
}
}
);
}
}
};
</script>
初始效果是这样的
image.png
距离我的需要还是很远的
要稍微改造一下方法
要怎么变成双击，然后左边元素转移到右边元素呢
这是需要结合用到我给<el-transfer></el-transfer>标签所绑定的data属性值，和v-model 的数组值
注：这里的data属性值，即edit_rolesOpenData，是一开始出现在左侧列表的所有元素数据
v-model属性，即edit_m.Roles，是我们放到右边的数组值，也是后面提交表单要带过去的值
实际上我们只需要操作v-model属性值
- 操作v-model的简单逻辑
1、判断option.key 是否在v-model数组值中存在
2、存在则 删除
3、不存在则push
transferRenderFunc(h, option) {
var _this = this;
return h(
'span', {
attrs: {
id: option.label
},
domProps: {
innerHTML: option.label
},
on: {
//首先把click换成双击事件 记得用 “” 包裹
"dblclick": function () {
//简单的逻辑 如果不在 v-model值数组里面，则push，否则从数组中删除
if(_this.edit_m.Roles.includes(option.key)){
let index = _this.edit_m.Roles.indexOf(option.key)
_this.edit_m.Roles.splice(index,1);
}else{
_this.edit_m.Roles.push(option.key)
}
}
}
}
)；
}
这样就基本实现了双击转移元素的操作了
但是我这个页面出现了很多次的穿梭框，想要复用到代码，优化一下
//优化的思路，把公共的代码段抽离出来作，其他作为参数
//很明显 return h() 这个代码基本是不变的，所以把他封装为一个函数
//自定义穿梭框双击元素转移 共用方法 ---优化抽离 传参（v-model值数组，h,option) 复用
transferRenderFunc(h, option) {
return this.h(this.edit_m.Roles, h, option);
}，
h(modelV,h,option){
return h(
'span',{
attrs: {
id: option.label
},
domProps: {
innerHTML: option.label
},
on: {
"dblclick": function () {
//简单的逻辑 如果不在 v-model值数组里面，则push，否则从数组中删除
if(modelV.includes(option.key)){
let index = modelV.indexOf(option.key)
modelV.splice(index,1);
}else{
modelV.push(option.key)
}
},
}
}
)
},
这样子就不用重复写h()里面的代码了，基本到这里就能满足我们的需求了
我参考的文章链接https://www.jianshu.com/p/5992a6ab82bf
感谢这位博主的文章帮了很大忙
