3
问题描述

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

<完>


will233
538 声望3 粉丝

天下大事,必作于细。