由于本人是個(gè)才開始的新人前端扯俱,所以用的方法和寫的代碼很一般蹋艺,僅僅個(gè)人參考
原文:Transfer 的數(shù)據(jù)通過?data?屬性傳入猛蔽。數(shù)據(jù)需要是一個(gè)對象數(shù)組,每個(gè)對象有以下屬性:key?為數(shù)據(jù)的唯一性標(biāo)識(shí)旗扑,label?為顯示文本蹦骑,disabled?表示該項(xiàng)數(shù)據(jù)是否禁止轉(zhuǎn)移。目標(biāo)列表中的數(shù)據(jù)項(xiàng)會(huì)同步到綁定至?v-model?的變量臀防,值為數(shù)據(jù)項(xiàng)的?key?所組成的數(shù)組眠菇。當(dāng)然边败,如果希望在初始狀態(tài)時(shí)目標(biāo)列表不為空,可以像本例一樣為?v-model?綁定的變量賦予一個(gè)初始值捎废。
解讀:靠data 來綁定元數(shù)據(jù)放闺,這個(gè)元數(shù)據(jù)就是所有你想出現(xiàn)在這個(gè)穿梭框上的數(shù)據(jù),我的問題就是缕坎,需要顯示已添加與未添加數(shù)據(jù),這里的data綁定數(shù)據(jù)就需要使用你所獲取的所有數(shù)據(jù)(包含已添加與未添加)篡悟,加在一起形成一個(gè)新數(shù)組(列如已添加:5人谜叹,未添加:4人那這個(gè)數(shù)組就是9人),在組成總數(shù)據(jù)后搬葬,還需要進(jìn)行下數(shù)據(jù)替換荷腊,換成滿足插件使用的樣子,在上方例子中就出現(xiàn)for循環(huán)一個(gè)新數(shù)組急凰,這個(gè)數(shù)組內(nèi)需要重構(gòu)成含有 key(唯一標(biāo)識(shí)符女仰,一般是傳id之內(nèi)),label(顯示的名稱下方就是顯示的終端姓名),disabled(禁用那些數(shù)據(jù))抡锈,還有些其他參數(shù)我因?yàn)闆]用就沒看了疾忍,更多詳細(xì)的請參考https://element.eleme.cn/#/zh-CN/component/transfer官方文檔,在總數(shù)組重構(gòu)后床三,我們還需要將放在右邊框位置的數(shù)據(jù)也進(jìn)行一樣的重構(gòu)一罩,不過這時(shí)我們只需要key(id)就可以了,向例子中的value:[1,4],綁定在v-model里撇簿,組件會(huì)自動(dòng)根據(jù)key來講出現(xiàn)的key自動(dòng)變到右邊去聂渊;后面還有交換事件,可以監(jiān)聽到交換值(key)四瘫,可以直接用汉嗽;