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

oujie 发布于2019-08-21 18:26 / 1221人阅读

摘要：问题描述的穿梭框一直有个问题，具体来讲是穿梭框选中到目标列后，顺序不是按照选中的顺序，而是按照默认的顺序排列的。

问题描述

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

<完>

专线服务云服务器显示顺序顺序表求集合问题显示下拉框 html输入框点击后

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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...

wenshi11019 2019-08-23 16:03 评论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