element-ui Transfer(穿梭框) 自定義褒傅,給元素綁定雙擊事件轉(zhuǎn)移到另一個(gè)框里

大家都知道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
感謝這位博主的文章幫了很大忙

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市既琴,隨后出現(xiàn)的幾起案子占婉,更是在濱河造成了極大的恐慌,老刑警劉巖甫恩,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件逆济,死亡現(xiàn)場離奇詭異,居然都是意外死亡磺箕,警方通過查閱死者的電腦和手機(jī)奖慌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來松靡,“玉大人简僧,你說我怎么就攤上這事〉衿郏” “怎么了岛马?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長阅茶。 經(jīng)常有香客問我蛛枚,道長,這世上最難降的妖魔是什么脸哀? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任蹦浦,我火速辦了婚禮,結(jié)果婚禮上撞蜂,老公的妹妹穿的比我還像新娘盲镶。我一直安慰自己,他們只是感情好蝌诡,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布溉贿。 她就那樣靜靜地躺著,像睡著了一般浦旱。 火紅的嫁衣襯著肌膚如雪宇色。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音宣蠕,去河邊找鬼例隆。 笑死,一個(gè)胖子當(dāng)著我的面吹牛抢蚀,可吹牛的內(nèi)容都是我干的镀层。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼皿曲,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼唱逢!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起屋休,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤坞古,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后博投,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體绸贡,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡盯蝴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年毅哗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捧挺。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡虑绵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出闽烙,到底是詐尸還是另有隱情翅睛,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布黑竞,位于F島的核電站捕发,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏很魂。R本人自食惡果不足惜扎酷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望遏匆。 院中可真熱鬧法挨,春花似錦、人聲如沸幅聘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽帝蒿。三九已至荐糜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背暴氏。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國打工丛版, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人偏序。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓页畦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親研儒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子豫缨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容