修改element-ui源碼解決穿梭框選擇後顯示順序問題

問題描述

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

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

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

官方團隊目前還沒有改進的計劃。
無奈只能本身動手改了。

我使用的是v1.4.2版本。

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

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

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

npm run dev

2、修改代碼

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;
  }
}

3、打包發佈

npm run dist
將dist目錄下的lib覆蓋本身項目目錄下的lib便可

<完>