ant design vue 穿梭框双击添加到另一边

最新推荐文章于 2024-07-11 18:35:43 发布
最新推荐文章于 2024-07-11 18:35:43 发布
阅读量680 收藏 4
点赞数 2
分类专栏： ant design vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68420244/article/details/128331211
版权

 

 

 

记录一下今天实现的一个功能     ant design vue 穿梭框实现双击添加

网上查了很多，基本上都是关于element的，ant的很少，element的是用的自定义事件，我看了一下ant的文档，发现并不支持自定义事件，可能是我没找到，然后就自己在这摸索，最后自己给写了出来，大家做个参考

首先是单击添加，单击的就不多说了，文档里都有，下面咱们直接说双击，

穿梭框的数据都是写在dataSource里面，默认显示在左边，，但是他会把targetKeys里面的除外，然后显示在右边，所以我们只需要双击的时候把那一条数据添加到targetKeys 里面就可以了

 

 

这样加上之后我们就实现了双击从一边添加到另一边的 效果

 

 最后给大家看一下完整代码

 

小黄xue前端
关注
专栏目录
ant design vue实现穿梭框单选
shizhihua11的博客
12-13 5112
最近有一个朋友问了一个问题，ant design vue的穿梭框如何实现单选，且禁用顶部的全选checkbox 之前项目中用到的是ant design pro,没有用到ant design pro of vue，也没有用过穿梭框组件； 所以克隆项目写了一个demo,并就开始一个ant design pro of vue项目做一个梳理总结 1.克隆ant design pro of vue项目 ...
点击左边列表在右边显示选项 多选 单选
07-23
左边一个列表（从数据库里读出的） 右边一个列表 你点击、双击 就可以将左边选中的 显示在右边。可以实现简单的单选 多选的问题。为了你能下载就能运行，所以我就弄了一个简单的列子 可以给你一些重要提示。希望能帮助你
element-ui中穿梭框，双击移动功能
weixin_45714257的博客
03-31 697
element-ui中穿梭框，双击移动功能 // An highlighted block // 方法 selectPanel() { window.setTimeout(() => { let list1 = document.getElementsByClassName('el-transfer-panel__list')[0].children for (let i = 0; i < list1.length; i++) {
react穿梭框双击移动
weixin_45239190的博客
04-07 250
链接： 在react中实现单击双击 2. 在穿梭框中使用 3. 完整代码
巧用ant-design menu解决类似穿梭框并解决单击双击事件分离问题
qq_36384745的博客
04-26 736
巧用ant-design menu模拟穿梭框，巧用ant-design menu解决单击双击事件分离问题，react双击不触发单击事件
ant design vue ＜a-transfer＞简单穿梭框实现
a nice day
02-17 1492
简单穿梭框
ant design vue中日期选择框混合时间选择器的用法说明
01-22
首先时间格式化用到moment方法，需要在页面中引入moment组件 import moment from ‘moment’ 结构代码： <a> triggerNode[removed] format=YYYY-MM-DD HH:mm:ss v-decorator=[ 'pushtime', ...
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
vue用ant design中table表格,点击某行时触发的事件操作
01-18
使用customRow 设置行属性，写对应事件 ...补充知识：Ant-Design-Vue table 合并单元格，并且添加点击事件 点击行，有一个customRow。可以配置点击事件。 单元格的自定义分为两种方式。 一种是：通过tem
ant-design-vue离线文档
09-23
vue ant design的离线文档， 解压后打开目录 npm install 运行 npm start 启动 默认项目地址为 localhost:3000
vue+element-ui实现穿梭框数据自定义排序
12-05
vue+element-ui实现穿梭框数据自定义排序 实现了穿梭框右侧数据自定义排序的功能
vue antv 穿梭框Transfer配合树形控件Tree实现多选
最新发布
gaowxx的博客
07-11 427
如果要多选穿梭，要去掉 a-tree组件的 checkStrictly 属性。关键句在 method 的 onChecked 处。
Ant design vue的表格双击编辑功能（即双击开始编辑并自动获得焦点，失去焦点时完成编辑）
就在昨天之技术点滴
05-26 950
Ant design vue的表格双击编辑，失去焦点完成编辑
表格内每列数据勾选一个，合并一条新数据方法（vue2+antdVue）
yx13186308025的博客
12-08 1348
/通过这个方法把数组对象里面的key键全部取出存入数组（目的为了在表格中来循环出勾选方法，否则每一条数据都要单独写一个方法）customRender: "user", //通过table表格插槽在表格内定义勾选框方法，需要和data数据的名字一样。Ant Design Vue 是专为 Vue.js 框架设计的，充分利用了 Vue.js 的特性，使其更易于在 Vue 项目中集成和使用。//record[item].ischecked 用数组中存储的key去找到当前对应数据得选中状态。
Vue学习穿梭框Transfer组件
李长渊的博客
05-18 2243
Vue学习穿梭框Transfer组件
ant-design 中a-transfer穿梭框 组件的使用
reembarkation的博客
06-24 4398
a-transfer 组件的使用
vue3使用AntDesign＜a-table＞左右拖拽列及下拉框新增自定义数据
我行我素的博客
06-19 455
以上基本上就能实现左右拖拽了，但是会有的问题，目前空置的是选择列和操作列是不能拖动的，但是倒数第二列如果要拖到最后一列还是可以拖动的，目前没有找到解决方法，如果有解决的欢迎评论区代码附上一起探讨。2、下拉框新增自定义数据。
vue穿梭框
wf280496的博客
12-07 865
需要用到iview组件库，使用前请先安装iview，iview提供了穿梭狂组件，但是样式不好改，于是就重新写了一个。 本穿梭框在我的项目里只有一个地方用得到，因此没做组件化处理，有需要的，自行更改（不会改的话，就没得办法喽） 只做了穿梭效果，其他效果未做 <template> <div class="detect_hold"> <div class="taball"> <p :class="{check:check=='0'}"
php穿梭框多选,多选穿梭框总结 （vue + element）
weixin_42462007的博客
03-12 768
示例介绍实现省市区三级多选联动，可任选一个省级、市级、区级，加入已选框，也可以在已选框中删除对应的区域。选择对应仓库，自动勾选仓库对应的省，取消就反选选择同样地区，选择省级或市级，若该对象下面的市级或区级已有选择，就自动合并为一个省级或市级：例如：已选择：广东省广州市荔湾区点击加入：广东省广州市最后显示：广东省广州市广州市已被选择，对应市级的区将不显示，只显示对应的市同理：选择广东省，也将下面已选...
获取 Ant Design Vue 穿梭框右边选中的数据
03-28
在 Ant Design Vue 穿梭框中获取右边选中的数据，可以通过 v-model 绑定右边选中的数据，然后在提交时获取该数据即可。 例如： ```html <a-transfer :data-source="data" :target-keys="targetKeys" :selected-keys="selectedKeys" :render="render" v-model="selectedItems" ></a-transfer> ``` 在上面的代码中，v-model 绑定了 selectedItems，该变量即为右边选中的数据。 可以在提交时通过 selectedItems 获取右边选中的数据： ```javascript submit() { console.log(this.selectedItems); } ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值