ElementUI中transfer组件左右数据同源问题

最新推荐文章于 2024-02-27 21:00:00 发布
最新推荐文章于 2024-02-27 21:00:00 发布
阅读量1.5k 收藏
点赞数
分类专栏： 前端 文章标签： elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vcxiyh/article/details/129586604
版权

问题描述: 在使用element ui组件库中的transfer穿梭框组件时, 遇到一个问题, 由于数据量太大, 所以需要通过附加请求参数来获取到数据源, 这时就出现一个问题, 当搜索条件改变, 获取到的数据改变时, 右侧已经选中的数据也不再显示了, 但是当搜索结果变为上次的数据时, 右侧数据又会出现, 由此可见, 右侧数据并不是消失了, 而是由于左右数据同源的问题, 无法展示在列表中

 

需求: 在搜索条件改变, 数据改变时, 保留右侧数据展示

解决方案: 在获取到搜索结果时, 将右侧已经选中的数据逐个添加进数据源中, 并去重, 由此, 就实现了需要的效果

在常见的情况下, 组件的key为数据的id, label为要展示的数据项的名称/标题, transfer组件通过v-model绑定的数组中, 存放的也只有数据的id, 那么这种时候, 将右侧数据添加进数据源中, 右侧的label名称展示将丢失, 展示的为绑定的key(数据id), 为解决以上问题, 在获取到搜索结果时, 需要通过循环为每一个数据项添加一个额外的属性, 格式为'key|label', 组件设定的props中的key属性, 也绑定为新添加的属性, 这样, 组件绑定的数组中的每一项, 就包含了数据的id和要展示的名称, 再通过简单的操作, 就实现了我们最终需要的效果.

独倚灵剑醉小楼Z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
(el-Transfer)操作(不使用 ts)：Element-plus 中 Transfer 穿梭框右侧数据不展示的问题
狮子座的男孩
04-30 1153
1、 提供组件情况：其一、 自提供的代码情况为(示例的代码)： 代码地址：其二、页面的显示情况为： 其二、页面展示： // 整体功能模块的展示情况： // 选中 table 表格中第一个数据后，右侧的已选端口，应该展示成员值：// 即：上述的已选端口要和 table 中第一个成员的值，一一对应;发现 的的值是按照要求的数组(即：按道理说应该展示没问题)，且右侧的值也是按照要求的数组值(即：按道理说应该展示没问题)，但是的值就是展示不出来;// 此时 组件就又能展示的值，且此时右侧展示的值就是项目想要的
el-transfer（穿梭框）一边数据为空时，尝试添加至另一边报错：Cannot read property ‘0‘ of null at patchBlockChildren (runtime-
qq_39973242的博客
03-02 730
<el-transfer v-model="transferData.value" :props="{key:'id',label:'name',disabled:'status'}" :data="transferData.data" style="text-align: left; display: inline-block" filterable :titles="['未拥有菜单', '已拥有菜单']" :button-texts="['分配', '移除']" :format="{noCheck
Element transfer 两边数据（左右）的显示问题？
weixin_30646505的博客
11-14 2446
本仙今天遇到这个穿梭框的问题 这个是我前几天刚换的（原来用的是iview的，换成了element ） 别问我为什么，用过iview的都知道 转入正题 问题：从后台获取的数据全部都显示在了我的左边框中 右边框嘛也没有 其实这个问题 根本不是个 问题 但是还是浪费了我不少的时间 因为我没好好看文档？好了 可能因为我太轻敌了吧 情况是这样的：左边是我全部的数据 红框框的应该在右边的 但是...
关于el-transfer右侧数据显示的问题
Norah_Yang的博客
01-14 5209
问题提出 近期做项目需要使用穿梭框，就高高兴兴地开始贴代码。把从后台取过来的数据放在穿梭框左侧，用props对属性进行重命名 presetProps:{ key:'presetCode', //value label:"presetName", //name }, 在给右侧添加数据时，数据是可以进去，但是左侧框依然存在相同数据。百度了很久都没找到相似问题，是我太蠢了咩~ 问题解决 在不使用后台数据的情况下，发现左右框是能正常显示的。重新看了一下从后台取到的v
element-UI穿梭框Transfer,目标列表数据(右边列表)会随源列表数据(左边列表)的变化而同步变化
weixin_50336510的博客
04-28 4519
【问题描述】element-UI穿梭框Transfer,目标列表数据(右边列表)会随源列表数据(左边列表)的变化而同步变化, 【业务场景】综合表单组件,具有自定义筛选条件的基础类穿梭框,每查询一次,源列表数据随查询条件不同而变化,但目标列表数据不能变化,要保留用户已选择到目标列表的数据,除非用户手动将目标列表数据移动到左边源数据中,如下图: 【问题定位】左边列表数据不能独立累加,会变化的原因是,Transfer组件中将左边列表数据与右边列表数据做了绑定,只有左边列表存在的数据才能选到右边列表中 【
PHP观后感——变量概念及命名规范
qq_46148060的博客
09-27 189
变量 变量是一段有名字的连续存储空间。在源代码中通过定义变量来申请并命名这样的存储空间，并通过变量的名字来使用这段存储空间。 变量是程序中数据的临时存放场所。在代码中可以只使用一个变量，也可以使用多个变量，变量中可以存放单词、数值、日期以及属性。 命名规范 PHP 变量规则： 变量以 $ 符号开始，后面跟着变量的名称 变量名必须以字母或者下划线字符开始 变量名只能包含字母数字字符以及下划线（A-z、0-9 和 _ ） 变量名不能包含空格 变量名是区分大小写的（$y 和 $Y 是两个不同的变量） 一、基本规
elementUI 穿梭框右侧数据回显问题，查了许多资料都不是自己想要的，折腾一上午终于出来了
weixin_46156770的博客
05-24 6652
<el-transfer style="width:80%;margin:0 auto" v-model="selectedTransfer" :data="noRelation" @change="selectedData" :titles="dialogModel == 0 ? ['关联选手','已选关联选手'] : ['关联战队','已选关联战队']"></el-transfer> 这里的v-model就是右侧数据回显的值，是个回显数据key的数组 :da
element ui下拉框value绑定多个数据
m0_61924791的博客
07-02 443
element ui下拉框value绑定多个数据
el-transfer设置v-model无效（右侧选择框有数据不显示）
最新发布
qq_51225312的博客
02-27 911
例如：data = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'],那么v-model = []这是因为el-transfer的v-model是data的子集。上海、 北京、 广州、 深圳、 南京、 西安、 成都。深圳、南京、西安、成都。
完善的vue+elementui的自定义transfer组件
10-16
对之前已做的transfer组件做完善，新增已选列表搜索功能，修复搜索数据重复问题
vue+elementui 实现transfer组件，对里面增加一点功能，修改一些问题
12-27
对原先的功能做了一些改进，以及增加一点额外需求功能
前端 elementUI 穿梭框大量数据分页处理
03-03
本文将详细介绍如何在ElementUI的穿梭框组件中实现大量数据的分页处理，并提供一个名为`myTransfer`的示例资源，该资源可以直接引入到你的ElementUI项目中，帮助你解决此类问题。 首先，理解穿梭框的工作原理是解决...
elementUI-使用el-table自定义transfer组件
08-14
在elementUI中使用el-table自定义完成transfer组件功能。内有注释使用说明
ElementUI transfer+table.zip
06-04
穿梭框（Transfer）是ElementUI中的一个功能组件，用于在两个列表之间进行数据的双向选择。它通常用于在大量的数据中进行筛选和分配，比如角色权限设置或者多选操作。穿梭框由两部分组成：左侧列表和右侧列表，用户...
element ui Transfer 穿梭框
gts_0901y的博客
08-06 3509
v-model = 右边的数据 :data = 左边的数据
elementui穿梭框数据不更新
weixin_43883179的博客
07-21 647
监听穿梭框change事件使用this.$forceUpdate()强制更新。
修改element-ui的Transfer组件无数据样式
幼儿园园长
07-08 2642
废话不多说，直接说需求上代码 默认穿梭框无数据的样式 设计稿要求的样式 修改方法： 官方没有修改无数据默认样式的API，因此需要css修改默认样式加上背景颜色 // transfer .el-transfer-panel .el-transfer-panel__empty{ height: 100px !important; line-height: 190px !important; width: 88px !important; background: url('../assets
仿element ui的Transfer 穿梭框,实现多个数据同步联动
Red_Sugar的博客
12-09 660
想实现一个页面多个Transfer 用同一个数据源,一个Transfer 变换后所有Transfer 左侧数据同步变化. 最后实现的效果如图,左侧数据变换后所有左侧数据全部跟随变化, 源代码链接:https://github.com/DalaoT/packaging_method/blob/master/%E7%A9%BF%E6%A2%AD%E6%A1%86.vue ...
关于elementui出现el.transfer.noData或者le.*.*等无数据时不显示中文的问题（国际化）
qq_39336120的博客
01-23 444
关于elementui没有数据的情况下出现转意问题,可能是开启国际化导致的在国际化的配置文件中配置上对呀的配置就行。
elementui Transfer 穿梭框如何动态数据
09-07
可以通过修改 Transfer 组件的 data 属性来实现动态数据。Transfer 组件的 data 属性接收一个数组，包含两个子数组，分别代表左右两栏的数据。你可以通过监听某个事件（如点击按钮），在回调函数中更新 data 数组的值，从而实现动态数据的穿梭。 下面是一个简单的示例代码： ```vue <template> <div> <el-transfer :data="data" :titles="['Source', 'Target']" @change="handleChange" ></el-transfer> <el-button @click="updateData">更新数据</el-button> </div> </template> <script> export default { data() { return { data: [ { key: '1', label: '选项1' }, { key: '2', label: '选项2' }, // 初始数据 ] }; }, methods: { handleChange(targetKeys) { console.log(targetKeys); }, updateData() { // 模拟异步获取新的数据 setTimeout(() => { this.data = [ { key: '3', label: '选项3' }, { key: '4', label: '选项4' }, // 新的数据 ]; }, 1000); } } }; </script> ``` 在上面的示例中，Transfer 组件的 data 初始值为数组 `[ { key: '1', label: '选项1' }, { key: '2', label: '选项2' } ]`。当点击 "更新数据" 按钮时，通过 `updateData` 方法模拟异步获取新的数据，并将新的数据赋值给 `data` 属性。这样 Transfer 组件的数据就会动态更新。 你可以根据自己的需求，修改 `updateData` 方法来实现真实的数据获取和更新逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值