修改element-ui源码解决穿梭框选择后显示顺序问题

问题描述

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

<完>