問題描述

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

相關issue
有位同學吐槽的好哈：

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

官方團隊目前尚未改進的計劃。
無奈只能自己動手改了。

我使用的是v1.4.2版本。

一、參考官方教程搭建開發環境

https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md

下載指定版本的源代碼，進入項目目錄, 執行

npm run dev

二、修改代碼

Transfer組件定義在

packages/Transfer/main.vue

具體代碼就不一行行解釋了。

主要注意以下代碼：

computed: {sourceData() {return this.data.filter(item => this.value.indexOf(item[this.props.key]) === -1);},targetData() {// 源代碼的實現方式，根據選中的數據對原數組進行過濾，這里通過filter的方式，不會改變項目在原數組的位置，所以會出現穿梭框右側的選中列表和選擇的順序不一致的情況。// return this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1);// 改進代碼，遍歷選中值，查詢原數組的對應項目，組成新數組，這樣新數組的順序就和選中的值保持一致了。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;} }

三、打包發布

npm run dist
將dist目錄下的lib覆蓋自己項目目錄下的lib即可

<完>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。