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

oujie 發布于2019-08-21 18:26 / 1464人閱讀

摘要：問題描述的穿梭框一直有個問題，具體來講是穿梭框選中到目標列后，順序不是按照選中的順序，而是按照默認的順序排列的。

問題描述

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即可

<完>

云服務器 GPU云服務器顯示順序順序表求集合問題顯示下拉框 html輸入框點擊后

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90471.html

一個基于vue和element-ui的樹形穿梭框組件

摘要：在市面上找到一個好用的樹形穿梭框組件都很難，又不想僅僅因為一個穿梭框在之外引入其他重量級插件，因此就有了。版本增加穿梭框左側右側數據勾選事件，穿梭框左側右側底部。 el-tree-transfer 簡介·請先閱讀文檔及版本說明因為公司業務使用vue框架，ui庫使用的element-ui。在市面上找到一個好用的vue樹形穿梭框組件都很難，又不想僅僅因為一個穿梭框在element-ui之...

Corwien 2019-08-22 18:33 評論0 收藏0
餓了么組件庫element-ui正則表達式驗證表單，后端驗證表單。

摘要：要顯示的錯誤提示則可以即可。寫在最后的以上三點已經完全覆蓋了所有表單驗證的情況，可以實現非常復雜的驗證。正式基于這些原因，我堅信是正確的選擇。前言老是遇到一些朋友問一些element-ui組件使用相關的基礎問題，因為官方文檔上并沒有提供所有瑣碎的功能代碼demo。從這里開始我會根據我實際遇到的問題記錄一些常見的官方文檔沒有詳述的功能代碼，供給大家拓展思路。 1. 以中國大陸手機號驗...

0x584a 2019-08-21 16:22 評論0 收藏0
開發中遇到的問題總結

摘要：獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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...

Yuqi 2019-08-30 15:56 評論0 收藏0