資訊專欄INFORMATION COLUMN
摘要：?jiǎn)栴}描述的穿梭框一直有個(gè)問(wèn)題，具體來(lái)講是穿梭框選中到目標(biāo)列后，順序不是按照選中的順序，而是按照默認(rèn)的順序排列的。
element-ui 的穿梭框一直有個(gè)問(wèn)題，
具體來(lái)講是穿梭框選中到目標(biāo)列后，順序不是按照選中的順序，而是按照默認(rèn)的順序排列的。雖說(shuō)選中value是按照選擇順序的，但這種不一致還是讓使用者比較迷惑。
相關(guān)issue
有位同學(xué)吐槽的好哈：
左側(cè)飯店菜單, 右側(cè)客戶已點(diǎn)菜單, 已點(diǎn)菜的顯示順序和飯店菜單的順序必須保持一致這樣合適么...
—— from llwslc
官方團(tuán)隊(duì)目前尚未改進(jìn)的計(jì)劃。
無(wú)奈只能自己動(dòng)手改了。
我使用的是v1.4.2版本。
一、參考官方教程搭建開發(fā)環(huán)境https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md
下載指定版本的源代碼，進(jìn)入項(xiàng)目目錄, 執(zhí)行
npm run dev二、修改代碼
Transfer組件定義在
packages/Transfer/main.vue
具體代碼就不一行行解釋了。
主要注意以下代碼：
computed: {
sourceData() {
return this.data.filter(item => this.value.indexOf(item[this.props.key]) === -1);
},
targetData() {
// 源代碼的實(shí)現(xiàn)方式，根據(jù)選中的數(shù)據(jù)對(duì)原數(shù)組進(jìn)行過(guò)濾，這里通過(guò)filter的方式，不會(huì)改變項(xiàng)目在原數(shù)組的位置，所以會(huì)出現(xiàn)穿梭框右側(cè)的選中列表和選擇的順序不一致的情況。
// return this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1);
// 改進(jìn)代碼，遍歷選中值，查詢?cè)瓟?shù)組的對(duì)應(yīng)項(xiàng)目，組成新數(shù)組，這樣新數(shù)組的順序就和選中的值保持一致了。
let tmp = [];
this.value.forEach(item => {
let i = this.data.findIndex(it => it[this.props.key] === item);
tmp.push(this.data[i]);
});
return tmp;
},
hasButtonTexts() {
return this.buttonTexts.length === 2;
}
}
三、打包發(fā)布
npm run dist
將dist目錄下的lib覆蓋自己項(xiàng)目目錄下的lib即可
<完>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90471.html
摘要：在市面上找到一個(gè)好用的樹形穿梭框組件都很難，又不想僅僅因?yàn)橐粋€(gè)穿梭框在之外引入其他重量級(jí)插件，因此就有了。版本增加穿梭框左側(cè)右側(cè)數(shù)據(jù)勾選事件，穿梭框左側(cè)右側(cè)底部。 el-tree-transfer 簡(jiǎn)介·請(qǐng)先閱讀文檔及版本說(shuō)明 因?yàn)楣緲I(yè)務(wù)使用vue框架，ui庫(kù)使用的element-ui。在市面上找到一個(gè)好用的vue樹形穿梭框組件都很難，又不想僅僅因?yàn)橐粋€(gè)穿梭框在element-ui之...
摘要：要顯示的錯(cuò)誤提示則可以即可。寫在最后的以上三點(diǎn)已經(jīng)完全覆蓋了所有表單驗(yàn)證的情況，可以實(shí)現(xiàn)非常復(fù)雜的驗(yàn)證。正式基于這些原因，我堅(jiān)信是正確的選擇。 前言 老是遇到一些朋友問(wèn)一些element-ui組件使用相關(guān)的基礎(chǔ)問(wèn)題，因?yàn)楣俜轿臋n上并沒(méi)有提供所有瑣碎的功能代碼demo。從這里開始我會(huì)根據(jù)我實(shí)際遇到的問(wèn)題記錄一些常見(jiàn)的官方文檔沒(méi)有詳述的功能代碼，供給大家拓展思路。 1. 以中國(guó)大陸手機(jī)號(hào)驗(yàn)...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
閱讀 3546·2021-09-22 15:02
閱讀 3694·2021-09-02 15:21
閱讀 2178·2019-08-30 15:55
閱讀 2847·2019-08-30 15:44
閱讀 827·2019-08-29 16:56
閱讀 2467·2019-08-23 18:22
閱讀 3388·2019-08-23 12:20
閱讀 3133·2019-08-23 11:28
