問題描述

element-ui 的穿梭框一直有個(gè)問題，
具體來講是穿梭框選中到目標(biāo)列后，順序不是按照選中的順序，而是按照默認(rèn)的順序排列的。雖說選中value是按照選擇順序的，但這種不一致還是讓使用者比較迷惑。

相關(guān)issue
有位同學(xué)吐槽的好哈：

左側(cè)飯店菜單, 右側(cè)客戶已點(diǎn)菜單, 已點(diǎn)菜的顯示順序和飯店菜單的順序必須保持一致這樣合適么...
—— from llwslc

官方團(tuán)隊(duì)目前尚未改進(jìn)的計(jì)劃。
無奈只能自己動手改了。

我使用的是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即可

<完>

總結(jié)

以上是生活随笔為你收集整理的修改element-ui源码解决穿梭框选择后显示顺序问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。