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

<完>

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

从 Element UI 源码的构建流程看前端 UI 库设计
引言由于业务需要,近期团队要搞一套自己的UI组件库,框架方面还是Vue.而业界已经有比较成熟的一些UI库了,比如ElementUI.AntDesign.Vant等. 结合框架Vue,我们选择在Ele ...
django-oscar的物流状态pending修改以及分析源码解决报错:The new status 'xxx' is not valid for this order
先说物流状态的修改: django-oscar自带的物流状态是四个: OSCAR_INITIAL_ORDER_STATUS = 'Pending' OSCAR_INITIAL_LINE_STATUS ...
修改element UI的select下拉框组件右边的小箭头（使用自定义图片）
i.el-select__caret {/*很关键:将默认的select选择框样式清除*/ appearance:none;-moz-appearance:none;-webkit-appearanc ...
修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题
原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和 ...
【JS协议UI源码】autoJS协议源码，JavaScript界面源码，AJ脚本利用网盘就行远程关软
autoJS协议UI源码,该源码你可以学习到JavaScript基础语法还有简单的封装md5加密菜单判断和多号运行,本机存储和调用知识,如何不利用使用服务器进行远程关软和远程更新,远程关软我当时是利 ...
易语言修改html内容,易语言修改网页标题源码
易语言修改网页标题系统结构:取IES对象,GetCursorPos,WindowFromPoint,SendMessageTimeout,ObjectFromLresult,RegisterWindo ...
修改element ui的导航菜单样式，包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
修改Android10系统源码关闭selinux
一.seandroid简介 SEAndroid是Google在Android4.4上正式推出的一套以SELinux为核心的系统安全机制.在Android源码中,系统默认的seandroid配置存放如下 ...
直播网站程序源码，搜索框实现快速搜索功能
直播网站程序源码,搜索框实现快速搜索功能 module.exports = async function (params, context) {const db = context.databasec ...