el-transfer穿梭框左右转移按钮点击一次没反应需要点击两次的问题

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

记录一条在使用el-transfer遇到的问题，右边框中的值是通过查询数据库中的值显示的，基本测试的时候都没有问题，让同事给测试，然后发现从右往左移数据需要点两次才能移过去，然后点击保存也显示key已经存在无法保存。然后就控制台输出右边的值发现右边的值重复了两次，穿梭框会去重，还原同事的操作发现是他在点击保存按钮的时候以极快的手速点了两次…
在这里插入图片描述

在这里插入图片描述
我的解决办法就是在保存的时候放一个全局的判断值，该判断值同时也是保存按钮的显示值，第一次保存的时候改为false，保存完毕改为true，只有当其为false的时候才能进行保存语句，这样就没问题了。。

7a7a
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tree-transfer：一个基于vue和element-ui的树形穿梭框及邮件通讯录。一种基于Vue和element-ui的树形穿梭箱组件。 Vuecli3版本见https：github.comhql7wl-tree-transfer示例见->
02-06
树转移 简介 el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经发布 ！此组件功能组件element-ui的组件，但是里面的数据是树形结构！，， el-tree-transfer依赖的element-ui组件分别是， ，和最主要的写成！不是在element-ui的穿梭框组件上的扩展，而明显参照了其外观样式和功能。 因为公司业务使用vue框架，ui库使用的element-ui。在城市表面找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-ui之外其他重量级插件，因此就有了el-tree-transfer。轻量，
group-transfer:可分组的穿梭框---在element-ui的原始码上修改-修改
03-24
公共组件-可分组穿梭框 道具以及活动无缝对接饿了么ui的穿梭框， 预览 道具的一点说明 参数 说明 类型 任选值 默认值 数据 数据源 数组[{键，标签，已禁用，孩子：[]}] -- [] 道具 数据源的随机别名 对象{键，标签，已禁用，儿童} -- -- 渲染内容 自定义数据项渲染函数 功能（h，选项） -- -- 禁用所有 局部全部选项 布尔型 -- 错误的 showOverflow工具提示 当内容过长被隐藏时显示tooltip 布尔型 -- 错误的 代码示例 < ec-group-transfer v-model =" value " :data =' json ' filterable @change =" handleChange " :left-default-checked =" ['2', '3'] "
el-transfer 穿梭框
凡尘
03-19 240
el-transfer 穿梭框
el-transfer穿梭框使用（传值、清空）
coinisi_li的博客
08-18 3732
可能会遇到从后台获取的数据全部都显示在了左边框中，右边框没有数据，因为 v-model 绑定的selectedUserIds接收的是 key 的数组。有两个区域：一个是"待选用户"，另一个是"已选用户"。在组件el-transfer中有些特殊，因为他禁用的不是整个组件，而是每条数据。注意，这种索引方式依赖于子组件在模板中的位置，如果你的模板结构发生变化，这些索引可能会失效。来给子组件命名，然后通过命名来访问子组件，而不是通过索引。组件中的不同区域，每个区域可能具有不同的查询条件(代表一个Vue组件的引用。
el-transfer的入门学习
qq_40765784的博客
06-06 1889
el-transfer的入门使用
Vue Element Transfer 穿梭框使用
Tiny2017的博客
10-14 2540
实现效果图 主要希望能在点击左右交换的时候，能够监听事件，并即时提交至后台 首先，使用组件 <h5 class="title">关联菜单元素管理</h5> <div class="block menu-element-block"> <el-transfer ...
element按钮失效
nrskhdzl的博客
07-09 812
项目中用了element框架，按钮一直好好的，但有一天突然按钮失效，查找一圈没找到原因，最后发现是黄色框里的样式值给的太小了，调大之后按钮可以正常使用
解决el-transfer穿梭框回显数据后无法移动
weixin_44116344的博客
03-30 816
在methods中定义方法， this.addObj.dataPms是穿梭框右边回显的数据。解决：在change事件中绑定回显的数据。
树形穿梭框el-tree-transfer(Vue el-tree与el-transfer的结合) --- 解决搜索时子节点和父节点不同步问题
elephant_my的博客
08-26 2660
问题描述 在穿梭框中搜索父节点时，其下的子节点不能被一起搜索到，但是搜索子节点时，其上的父节点会被搜索到。 解决代码 先上代码: /* * @fun:自定义搜索逻辑 * @params:query输入的要检索的关键字，item当前遍历的节点 * 作用：会将树从上往下（包括父子节点)进行顺序遍历 * */ filterMethod(query, item) { // 判断是不是第一次查询，是的话，将首节点赋值 //firstKey:缓存首节点key值，为了避免二次搜索时上一次的检索条件
element 表单下拉菜单点击上下箭头失效
a1006061435的博客
06-18 1712
element 表单下拉菜单点击上下箭头失效 使用表单的Form-Item Slot 把label改成下拉菜单，然后点击箭头图标不触发下拉事件 解决办法：el-form-item上一定要加上prop <el-form-item label="_cw('签收日期')" class="el-col-12" prop="shpTime"> <el-select class="isBillingTime" slot="label" v-model="isBillingTime"&gt
基于element-ui的transfer组件改造的可上下左右调整数据的transfer组件
u011070165的专栏
03-28 5993
这里写自定义目录标题蛋疼的需求描述实现效果代码传送门 蛋疼的需求 蛋疼的甲方提了蛋疼的需求，要数据进行上下排序，直接导致不能使用element-ui提供的组件，虽然很想怼回去，出于敬业，既然甲方提了那就实现呗，so。。。 描述 大致就是在沿用了el-transfer的样式，并且在他原有的基础上添加了上下移动的功能。对于上下移动的功能，可以只限左边上下移动。也可以只限右边，或者两边都可以进行上下移动...
el-tree实现el-transfer(穿梭框)的效果代码（全）
04-25
1、勾选左侧的功能资源，点击【添加】，可将内容添加到右侧，并且左侧勾选的数据删除；勾选右侧的已选资源，效果同左侧一样； 2、勾选全选，则资源全部添加到右侧，左侧的则显示为空 3、保存后点击编辑，左侧显示未...
bpo-elt-transfer:基于elementui 的表格穿梭框，参照了elt-transfer
04-16
更改了props 和表格的列定义方式，使其更贴合原生el-transfer 和el-table 的使用。提高了客制化能力，并且使用方式更符合直觉。 安装 npm install bpo-elt-transfer 使用 在main.js文件中引入插件并注册 import ...
el-tree-transfer.rar
04-10
实际上，el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在 element-ui 的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。
Element-plus使用记录
IT菜鸟
04-24 240
Element-plus使用中遇到的问题与解决方案。
el-popover放在el-table中点击无反应问题
Z_Gleng的博客
04-24 303
我们想在table中给btn加弹框但是 el-popover点击按钮没有任何反应。:通过插槽去添加这个组件el-popover的id是否绑定了一个值。给每个el-popover都加上单独的id。代码 给每个组件都绑定ref。通过他的id去控制关闭。
element plus：tree拖动节点交换位置和改变层级
1111111111
04-23 408
图层list里有各种组件，用element plus的tree来渲染，可以把图片等组件到面板里，面板是容器，非容器组件，比如图片、文本等，就不能让其他组件拖进来。对于其他组件来说，只有before和after是允许的，所以当type不等于inner的时候，allow-drop的返回值才是true，否则是false。比如把A节点向B节点拖动，before表示把A拖到B的前面，after表示把A拖到B的后面，inner表示把A拖到B里面去。关键点：draggable为true，设置allow-drop方法。
el-table 三角形提示
凡尘
04-25 393
el-table 三角形提示
Vue3 el-dialog 二次封装踩坑实录（v-model moduleValue 不触发）
最新发布
Li_Ning21的博客
04-27 192
如果你封装了一个el-dialog的子组件，想通过父组件v-model的形式调用，切记不能使用v-model，要使用 v-model:[你的参数]，例如 v-model:visible。
el-transfer穿梭框单选
06-09
要实现 el-transfer 穿梭框单选，可以通过设置 `:show-checkbox` 属性为 `true`，并将 `:check-position` 属性设置为 `left` 或 `right`，然后在 `:data` 属性中为每个选项添加一个 `checked` 属性，用于表示该选项...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值