大家都知道element-ui的穿梭框是這樣子的
image.png
左邊的列表數(shù)據(jù)，需要通過點(diǎn)擊中間
< 和 > 的按鈕才能進(jìn)行轉(zhuǎn)移，今天接到個(gè)需求直颅，說要通過雙擊即可將元素轉(zhuǎn)移氧吐，找遍了element文檔只發(fā)現(xiàn)有這么三個(gè)事件
image.png
根本不能滿足需求讹蘑，然后就在心里暗暗罵道，就那么懶嗎筑舅，而且雙擊的話座慰，那還要多選來干嘛，用別人的組件又不想遵循別人的規(guī)則
image.png
還是沒辦法翠拣，百度找了很久才發(fā)現(xiàn)transfer可以自定義事件
通過
render-content屬性版仔，再看了看文檔才發(fā)現(xiàn)有略微提到這樣一個(gè)屬性，可是也沒詳細(xì)案例
image.png
百度找了下误墓，才知道要如何自定義transfer
現(xiàn)附上自定義的代碼結(jié)構(gòu)
<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
距離我的需要還是很遠(yuǎn)的
要稍微改造一下方法
要怎么變成雙擊蛮粮，然后左邊元素轉(zhuǎn)移到右邊元素呢
這是需要結(jié)合用到我給<el-transfer></el-transfer>標(biāo)簽所綁定的data屬性值，和v-model 的數(shù)組值
注：這里的data屬性值谜慌，即edit_rolesOpenData然想，是一開始出現(xiàn)在左側(cè)列表的所有元素?cái)?shù)據(jù)
v-model屬性，即edit_m.Roles欣范，是我們放到右邊的數(shù)組值变泄，也是后面提交表單要帶過去的值
實(shí)際上我們只需要操作v-model屬性值
- 操作v-model的簡單邏輯
1、判斷option.key 是否在v-model數(shù)組值中存在
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值數(shù)組里面，則push驳癌，否則從數(shù)組中刪除
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)
}
}
}
}
)滑燃；
}
這樣就基本實(shí)現(xiàn)了雙擊轉(zhuǎn)移元素的操作了
但是我這個(gè)頁面出現(xiàn)了很多次的穿梭框，想要復(fù)用到代碼颓鲜，優(yōu)化一下
//優(yōu)化的思路表窘，把公共的代碼段抽離出來作典予，其他作為參數(shù)
//很明顯 return h() 這個(gè)代碼基本是不變的，所以把他封裝為一個(gè)函數(shù)
//自定義穿梭框雙擊元素轉(zhuǎn)移 共用方法 ---優(yōu)化抽離 傳參（v-model值數(shù)組乐严，h,option) 復(fù)用
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值數(shù)組里面，則push昂验，否則從數(shù)組中刪除
if(modelV.includes(option.key)){
let index = modelV.indexOf(option.key)
modelV.splice(index,1);
}else{
modelV.push(option.key)
}
},
}
}
)
},
這樣子就不用重復(fù)寫h()里面的代碼了捂敌，基本到這里就能滿足我們的需求了
我參考的文章鏈接http://www.reibang.com/p/5992a6ab82bf
感謝這位博主的文章幫了很大忙
