資訊專欄INFORMATION COLUMN
摘要：問題描述的穿梭框一直有個問題，具體來講是穿梭框選中到目標(biāo)列后，順序不是按照選中的順序，而是按照默認(rèn)的順序排列的。
element-ui 的穿梭框一直有個問題，
具體來講是穿梭框選中到目標(biāo)列后，順序不是按照選中的順序，而是按照默認(rèn)的順序排列的。雖說選中value是按照選擇順序的，但這種不一致還是讓使用者比較迷惑。
相關(guān)issue
有位同學(xué)吐槽的好哈：
左側(cè)飯店菜單, 右側(cè)客戶已點(diǎn)菜單, 已點(diǎn)菜的顯示順序和飯店菜單的順序必須保持一致這樣合適么...
—— from llwslc
官方團(tuán)隊目前尚未改進(jìn)的計劃。
無奈只能自己動手改了。
我使用的是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ù)對原數(shù)組進(jìn)行過濾，這里通過filter的方式，不會改變項(xiàng)目在原數(shù)組的位置，所以會出現(xiàn)穿梭框右側(cè)的選中列表和選擇的順序不一致的情況。
// return this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1);
// 改進(jìn)代碼，遍歷選中值，查詢原數(shù)組的對應(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90471.html
摘要：在市面上找到一個好用的樹形穿梭框組件都很難，又不想僅僅因?yàn)橐粋€穿梭框在之外引入其他重量級插件，因此就有了。版本增加穿梭框左側(cè)右側(cè)數(shù)據(jù)勾選事件，穿梭框左側(cè)右側(cè)底部。 el-tree-transfer 簡介·請先閱讀文檔及版本說明 因?yàn)楣緲I(yè)務(wù)使用vue框架，ui庫使用的element-ui。在市面上找到一個好用的vue樹形穿梭框組件都很難，又不想僅僅因?yàn)橐粋€穿梭框在element-ui之...
摘要：要顯示的錯誤提示則可以即可。寫在最后的以上三點(diǎn)已經(jīng)完全覆蓋了所有表單驗(yàn)證的情況，可以實(shí)現(xiàn)非常復(fù)雜的驗(yàn)證。正式基于這些原因，我堅信是正確的選擇。 前言 老是遇到一些朋友問一些element-ui組件使用相關(guān)的基礎(chǔ)問題，因?yàn)楣俜轿臋n上并沒有提供所有瑣碎的功能代碼demo。從這里開始我會根據(jù)我實(shí)際遇到的問題記錄一些常見的官方文檔沒有詳述的功能代碼，供給大家拓展思路。 1. 以中國大陸手機(jī)號驗(yàn)...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 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ù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 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...
閱讀 3560·2021-09-22 15:02
閱讀 3844·2021-09-02 15:21
閱讀 2190·2019-08-30 15:55
閱讀 2861·2019-08-30 15:44
閱讀 840·2019-08-29 16:56
閱讀 2484·2019-08-23 18:22
閱讀 3404·2019-08-23 12:20
閱讀 3149·2019-08-23 11:28
