element-ui Transfer(穿梭框) 自定义，给元素绑定双击事件转移到另一个框里

大家都知道element-ui的穿梭框是这样子的

image.png

左边的列表数据，需要通过点击中间< 和 > 的按钮才能进行转移，今天接到个需求，说要通过双击即可将元素转移，找遍了element文档只发现有这么三个事件

image.png

根本不能满足需求，然后就在心里暗暗骂道，就那么懒吗，而且双击的话，那还要多选来干嘛，用别人的组件又不想遵循别人的规则

image.png

还是没办法，百度找了很久才发现transfer可以自定义事件
通过render-content属性，再看了看文档才发现有略微提到这样一个属性，可是也没详细案例

image.png

百度找了下，才知道要如何自定义transfer
现附上自定义的代码结构

初始效果是这样的

image.png

距离我的需要还是很远的
要稍微改造一下方法
要怎么变成双击，然后左边元素转移到右边元素呢
这是需要结合用到我给标签所绑定的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
感谢这位博主的文章帮了很大忙