关键词:
项目场景:
Transfer(穿梭框),双栏穿梭选择框,常用于将多个项目从一边移动到另一边。这个组件在多个数据之间选择时非常方便。所有的控制都由组件完成,只需要最后保存组件目标值即可。
问题描述:
由于所有方式都由组件完成,因此会出现一种情况,当操作元素左右穿梭时,这些穿梭值与原数据样式一样,数据过多时,无法区分。而且组件没有任何一种方法直接可以特殊高亮显示。如下图所示(数据虽打马赛克,但可清晰看到数据颜色是相同的):
原因分析:
我在百度上找了好久都没有找到解决方案,最后查看官网说明和源码研究,哈哈,其实也没看懂多少,大概知道组件并没有提供一种方式去处理这个问题。但是从官网可以看到render-format原生属性,查看元素之后,这个函数最后将返回值包含在span标签内部充当元素处理,发现使用HTML元素标签也是可以识别的哦。因此可以用这个方式去解决问题
解决方案:
首先需要在vue data中定义几个数据
// 穿梭框左右移动操作值,
optionItems: [],
// 穿梭框右边值,后台获取
selectClientUserIds: [],
// 穿梭框左边值,后台获取
clientUsers: [],
// 初始化时选中值,赋值之后不再改变
initSelectItems: [],
页面代码
<Transfer ref="refTransfer" :titles="['客户端用户','授权用户']" :data="clientUsers" :target-keys="selectClientUserIds"
filterable :filter-method="filterClientUser" @on-change="clientUsersChange" :render-format="renderFormat"
:list-style="listStyle">
</Transfer>
部分js处理函数
// 打开弹出框,获取数据
openclientUserManageModal(id)
this.clientUserManageId = id;
this.clientUsers = [];
this.selectClientUserIds = [];
// 清空穿梭框搜索条件
this.$refs.refTransfer.$children[0].query = '';
this.$refs.refTransfer.$children[2].query = '';
// 清空穿梭框复选框
this.$refs.refTransfer.$children[0].toggleSelectAll();
this.$refs.refTransfer.$children[2].toggleSelectAll();
// 清空选中项
this.optionItems = [];
//获取选中用户ID
getGrantClientUserIds(
id: id
).then((result) =>
if (result.status === 1)
// 获取选中值,即穿梭框右边的值
this.selectClientUserIds = result.data;
// initSelectItems 默认初始化选中值
this.initSelectItems = JSON.parse(JSON.stringify(result.data))
else
this.$Message.error(result.msg ? result.msg : "获取数据失败")
)
//获取所有客户端用户列表
getAllClientUsers().then((result) =>
if (result.status == 1)
// 初始化穿梭框左边的值
this.clientUsers = result.data;
else
this.$Message.error(result.msg ? result.msg : "获取数据失败")
)
this.$nextTick(() =>
this.clientUserManageVisible = true;
console.log(this.$refs.refTransfer)
)
,
filterClientUser(data, query)
return data.username.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
data.compName.toLowerCase().indexOf(query.toLowerCase()) > -1;
,
/**
* 重点处理函数,在穿梭框左右移动的时候,将移动过的数据key值保存在optionItems中,
* @param Object targetKeys 目标的key集合
* @param Object direction 移动方向
* @param Object moveKeys 移动的key数据
*/
clientUsersChange(targetKeys, direction, moveKeys)
this.selectClientUserIds = targetKeys;
// 默认选中方在右侧,即目标方
for (let moveKey of moveKeys)
if (this.initSelectItems.indexOf(moveKey) > -1) //如果是默认选中值
if (direction === 'left') //左移时添加
this.optionItems.push(moveKey)
else if (direction === 'right') // 右移时移除
let index = this.optionItems.indexOf(moveKey);
if (index > -1)
this.optionItems.splice(index, 1);
else
// 不是默认选中值
if (direction === 'left') // 左移时移除
let index = this.optionItems.indexOf(moveKey);
if (index > -1)
this.optionItems.splice(index, 1);
else if (direction === 'right') // 右移时添加
this.optionItems.push(moveKey)
,
/**
* 数据格式处理
* 穿梭框数据格式
* @param Object data
*/
renderFormat(data)
// 如果包含在操作项,显示为蓝色,否则默认
if (this.optionItems.indexOf(data.key) != -1)
return '<label style="color: #2D8CF0;">' + data.username + ' | ' + data.compName +
'</label>';
else
return '<label>' + data.username + ' | ' + data.compName + '</label>';
,
效果如下,可以看到操作后的数据颜色不同:
elementui组件中穿梭框内容显示不全解决方式
...方式有两种:1.改变穿梭框的宽度,在工程中全文搜索.el-transfer-panel,找到定义这个类的地方,修改宽度。2.鼠标移入数据时显示完整数据,用穿梭框的render-content属性。<new-transfer ref="quickbom 查看详情
element穿梭框transfer与进度条组件绑定(代码片段)
Transfer与进度条组件绑定文章目录Transfer与进度条组件绑定前言一、实现原理二、实现流程三、完整代码总结前言最近做的后台管理系统里使用了Element组件Transfer做了一个工作表,然后加了一个进度条来表示工作进度,我希望能将两... 查看详情
element-ui树形穿梭组件(代码片段)
...件一、基本使用二、参数设置一、基本使用npminstallel-tree-transfer--save<template><div>//使用树形穿梭框组件<tree-transfer:title="title":from_data='fromData':to_data='toData':defaultProps="label:'label'":... 查看详情
layui穿梭框可以显示多列吗
答案是肯定的,Layui穿梭框可以显示多列,它可以支持多列的显示,可以根据需要自定义列的宽度,以及每列的显示内容。它还支持多种排序方式,可以根据用户的需求进行自定义排序,使用起来非常方便。此外,Layui穿梭框还... 查看详情
element穿梭框点击后异步
对于您这个element穿梭框点击后异步问题解答,Element穿梭框点击后异步,一般有如下几种实现方式:1.使用Ajax异步请求:将穿梭框的点击事件进行绑定,触发后发起Ajax异步请求,请求后台接口获取数据,再做相应的处理,用于展... 查看详情
vue+element树形穿梭框组件
<divclass="organizational"><el-dialog:title="dialogTitle":visible.sync="addDialogVisible"v-if="addDialogVisible":before-close="handleClose":close-on-click-modal="false"width="80%" 查看详情
数据量庞大的分页穿梭框实现(代码片段)
...好源码写个博客回来的晚,第二天才写好。。写个分页的穿梭框,从而解决数据量庞大的问题我之前写过一篇博客:关于Element组件的穿梭框的重构介绍并实现的方法但是第二个分页的demo没有,在上一家公司匆匆解决后,没有写... 查看详情
vuetransfer穿梭框(代码片段)
ElementTransfer组件默认支持单个list的穿梭现业务需要支持两个list,效果如下 实现思路: 1、有选中才可穿梭 2、已穿梭源数据减少、目标增加(双向) 边界条件: 存储旧List((用于已穿梭后切换下拉框重置... 查看详情
sciter封装穿梭器组件总结
sciter穿梭器组件封装总结以下穿梭器组件分为两种,一种是树形结构穿梭器,另外一种是列表结构穿梭器。最终实现的效果:调用方可以通过抛出方法,对组件进行初始化,配置参数。组件根据参数生成相关组件。穿梭器实现的... 查看详情
sciter封装穿梭器组件总结
sciter穿梭器组件封装总结以下穿梭器组件分为两种,一种是树形结构穿梭器,另外一种是列表结构穿梭器。最终实现的效果:调用方可以通过抛出方法,对组件进行初始化,配置参数。组件根据参数生成相关组件。穿梭器实现的... 查看详情
语法高亮:.NET 的富文本框控件
...011-02-0412:58:35【问题描述】:我正在寻找一个免费的控件/组件/库,例如用于编辑python(或其他语言)代码的富文本框。我喜欢有一些功能:突出显示代码自动缩进行号定义新的突出显示样式或规则(针对OpenType关键字)有这样的... 查看详情
arcgisapiforjs实现点击文字内容获取所对应的点高亮显示。
...sapiforjs中经常会遇到想要点击文本就能获取所对应的点并高亮显示。其原理与搜索框内搜索属性值并高亮显示在地图中的原理是一样的。其核心的观念就是将所点击的文本值获取并替换给搜索框所要传入的值。即可得到我们的目... 查看详情
vscode操作(代码片段)
...L标签时,自动修改匹配的标签BabelJavaScriptbabel插件,语法高亮Babelrc.babelrc文件高亮提示Beautifycss/sass/scss/lesscss/sass/less格式化BetterAlign对齐赋值符号和注释BetterComments编写更加人性化的注释Bookmarks添加行书签BracketPairColorizer用不同颜... 查看详情
ivew组件的使用
iview的官网:https://www.iviewui.com/docs/guide/start1.选择快速上手2.安装解压,cmd,cd进你解压后的文件,cnpmi3.打包npmrunbuild,然后我们看到打包结果文件夹dist,如图 3.配置nglix在Testhtml中在建一个文件夹view 4.配置nginx.conf 最... 查看详情
element穿梭框自定义数据记录
参考技术A因为上方还有选项,实现当选择时间的时候出餐日期就会显示,没有的话就隐藏出餐日期列,所以需要根据条件判断一下是否显示,所以就用到了<spanslot-scope="option"></span>来自定义数据项,我本来想用el... 查看详情
简单模拟穿梭框(代码片段)
穿梭框相信很多人接触过,在写后台管理系统的项目时有很大可能性会用到这个功能。其实这个组件在elementui里面有,但是因为兼容性ie的问题(万恶的ie啊),我现在必须手写一个类似的功能供项目使用乞丐样式上图原汁原味... 查看详情
Winforms、ASP.NET、WPF 的语法高亮文本框
...0-0721:33:37【问题描述】:我正在寻找一个语法高亮文本框组件,最好是免费的,带有源代码,并且能够在Winforms、ASP.NET和WPF等中使用。此外,它应该不仅支持显示,还支持编辑内容。我发现了极好的免费ActiProSyntax 查看详情
ref实现父子组件之间通信
...del来监听数据的,只是找对应的值的时候比较复杂。,子组件如何给父组件传递信息呢?那我们依旧还是利用事件的传递,在子组件添加一个按钮,点击后绑定一个事件点击按钮我们就可以看到打印的内容,我们也可以拿到跟组... 查看详情