问题描述
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即可
<完>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。