获取element ui 穿梭框右边选中的数据

努力搬砖小苦瓜

已于 2022-08-15 10:01:55 修改

阅读量4.8k

点赞数 1

文章标签： ui elementui vue.js

于 2021-12-22 10:35:27 首次发布

本文链接：https://blog.csdn.net/weixin_45656587/article/details/122079937

版权

穿梭框的v-model绑定的就是右侧选中的数据

<el-transfer v-model="peoFormuname" :data="udata" class="peoitem"></el-transfer>

console.log(this.peoFormuname) //v-model绑定的就是选中的值

如果想要获取穿梭框左边值 / 右边值中某个选中的值，可以使用官方文档中的

left-check-change事件 / right-check-change事件

左 / 右侧目标数据勾选事件，回调参数：function(nodeObj, treeObj)见el-tree组件check事件返回值

<el-transfer
              v-model="peoFormuname"
              :data="udata"
              @right-check-change="rightcheckchange"
            >
</el-transfer>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

努力搬砖小苦瓜

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue element-ui el-transfer 获取选中值

yzshen123456的博客

07-16

6612

templete <el-transfer filterable @left-check-change="leftCopeChane" :titles="['菜品', '已选菜品']" :filter-method="filterMethod" v-model="value" :props="{ key: 'id', label: 'name' }" :data="da.

element ui 穿梭框_一个基于vue和element-ui的树形穿梭框组件【v2.2.3】

weixin_39953481的博客

12-22

1727

el-tree-transfer简介·请先阅读文档及版本说明因为公司业务使用vue框架，ui库使用的element-ui。在市面上找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-ui之外引入其他重量级插件，因此就有了el-tree-transfer。轻量，易用，无需投入其他学习成本。el-tree-fransfer是一个基于VUE和element-ui的树形穿梭...

2 条评论您还未登录，请先登录后发表或查看评论

layui 穿梭框transfer右侧数据赋值排序错乱小技巧.doc

05-28

一个简单的没有技术含量的方法

vue+element的穿梭框取右侧框选中的值

热门推荐

CanG_Yu_E的博客

10-23

1万+

关于element中使用-transfer穿梭框选中右侧内容效果如上图显示，要求是取右侧中的数据一开始我的想法是直接this.value就能取到，后来发现取到的是这样的数组，不是我要的值得数组，是key的数组，因为后台返回的是数组，里面是字符串，而不是对象，所以当时我key对应的是数组的索引通过思考，我相想出两个方法，也许还有更好的方法，因为已经解决了，所以没有多加思考方法一：去和后台确认...

【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路

weixin_34138056的博客

11-12

4569

最近做了一个需求在查询结果的表格中，选取（可多选）一些值，获取到保单号后，打开一个elementUI的穿梭框，然后获取到所有业务员，选取一些业务员后，将上一步获取到的保单号传递给业务员。画个示意图在这里遇到问题了问题是我要获取到右边我选取的人的工号和姓名，但是根据elementUI的文档提供的方法，渲染上去的信息都有一个唯一的key，在设置的时候 ↓ 1 ...

ElementUI transfer组件设置已选中右侧的值

qq_68155756的博客

04-17

2572

要想设置右侧已选中的值前提是左侧的数据设置成下面这样，一定要有id，key，label这三个值，然后右侧已选中的值是左侧的key就可以了

element-UI穿梭框Transfer,目标列表数据(右边列表)会随源列表数据(左边列表)的变化而同步变化

weixin_50336510的博客

04-28

4782

【问题描述】element-UI穿梭框Transfer,目标列表数据(右边列表)会随源列表数据(左边列表)的变化而同步变化, 【业务场景】综合表单组件,具有自定义筛选条件的基础类穿梭框,每查询一次,源列表数据随查询条件不同而变化,但目标列表数据不能变化,要保留用户已选择到目标列表的数据,除非用户手动将目标列表数据移动到左边源数据中,如下图: 【问题定位】左边列表数据不能独立累加,会变化的原因是,Transfer组件中将左边列表数据与右边列表数据做了绑定,只有左边列表存在的数据才能选到右边列表中【

vue+element-ui实现穿梭框数据自定义排序

12-05

在本文中，我们将深入探讨如何使用Vue.js框架与Element-UI库来实现穿梭框（Transfer）数据的自定义排序功能。Element-UI是基于Vue.js的一套丰富的UI组件库，其中包括了穿梭框组件，它常用于在两个列表之间进行数据的...

VUE Elemen-ui之穿梭框使用方法详解

10-14

在Vue.js开发中，Element UI库提供了一种方便的组件——穿梭框（Transfer），用于在两个列表之间进行数据的转移操作，常用于角色分配、权限设置等场景。本文将详细介绍如何在Vue项目中使用Element UI的穿梭框组件。 ...

element ui 穿梭框_一个基于vue和element-ui的树形穿梭框组件

weixin_39588084的博客

12-22

1591

el-tree-transfer因业务需求需要用到一个穿梭框组件，而各大主流UI库和市面上的穿梭框都是一维数据，不支持树形结构的穿梭数据，然后我自己就写了一个树形穿梭框组件，用户界面完全按照元素的UI风格。并且使用此插件时默认你已经引入了元素的用户界面的按钮，复选框，树组件！并且是一个VUE项目，你就可以像使用普通VUE组件一样使用它。el-tree-fransferel-tree-fransfe...

element ui 穿梭框_基于elementui的穿梭框

weixin_36467992的博客

01-13

674

$(function() {//全选函数$('.checkbox-all').click(function() {if ($(this).prop('checked')) {$(this).parent().next().find('.checkboxs').prop('checked', true);} else {$(this).parent().next().find('.checkboxs...

el-transfer穿梭框，右侧数据回显

最新发布

weixin_51722520的博客

11-03

2073

el-transfer穿梭框，右侧数据回显

AntDesign 穿梭框(Transfer)如何绑定右侧框数据

weixin_46051095的博客

06-28

2820

使用target-keys绑定右侧框数据,只需要一个数组绑定既可

layui穿梭框transfer给右边value赋值,得到transfer右边的值

amberom的专栏

04-19

835

2、loginName这个变量是可以自己随意加的，你加的话那么你得到的getData数据里面就会有这个属性和对应的值。但是value和title这两个不可以更改。1、在划横线的两处地方调用了transfer.getData()。getData这个变量是在上面先定义了的。值是parseData 里面value的值。value就是右侧框里面的值。，最关键的是它里面的。

el-transfer穿梭框使用（传值、清空）

coinisi_li的博客

08-18

6559

可能会遇到从后台获取的数据全部都显示在了左边框中，右边框没有数据，因为 v-model 绑定的selectedUserIds接收的是 key 的数组。有两个区域：一个是"待选用户"，另一个是"已选用户"。在组件el-transfer中有些特殊，因为他禁用的不是整个组件，而是每条数据。注意，这种索引方式依赖于子组件在模板中的位置，如果你的模板结构发生变化，这些索引可能会失效。来给子组件命名，然后通过命名来访问子组件，而不是通过索引。组件中的不同区域，每个区域可能具有不同的查询条件(代表一个Vue组件的引用。

layui transfer 获取右侧点击

lin694218943的博客

01-08

1777

layui transfer 获取右侧点击，穿梭过程验证 f=“layui-transfer-active”,y=“layui-transfer-data” 一个是穿梭的动作，一个是右侧数据 var s = $('.layui-transfer-data'); console.log(s[1].childNodes[0].children[0].checke...

解决elementUI中穿梭框（transfer）组件搜索框中内容清除问题

wendy_monkey的博客

04-11

1万+

清除elementUI中穿梭框（transfer）组件搜索框中的内容 <el-transfer filterable filter-placeholder="请输入" v-model="houseLists" :data="lists" ref="myTransfer"&g...

vue 自定义el-table穿梭框功能

lemon今天学习了吗？的博客

06-05

2633

一、需求描述：前段时间接到一个需求是点击做一个类似穿梭框的表格点击选中功能，弹框的左边是全部数据展示，点击表格行数据可以选中自动增加到右边的已选框，并且可以手动删除、重置选中数据。点击确定后到展示到主页面，被选中的数据打开弹框不能再次选择。

el-transfer 左侧右侧默认数据展示

kristen999的博客

05-30

5359

说的最终效果： html <el-transfer filterable :titles="['所有数据列表', '已选数据列表']" filter-placeholder="关键字模糊搜索" :filter-method="filterMethod" @change="handleChange" .

element plus 穿梭框

06-02

好的，我理解您的问题是关于 Element Plus 中的穿梭框的使用。Element Plus 是一款基于 Vue.js 框架的 UI 组件库，其中包含了穿梭框组件，可以帮助用户方便地进行列表项的移动和选择。在使用 Element Plus 的穿梭框组件时，您需要先在 Vue.js 项目中引入 Element Plus 组件库，然后按照以下步骤进行操作： 1. 在模板中添加穿梭框组件的标签，例如： ``` <el-transfer v-model="selectedItems" :data="dataList" :titles="['Source', 'Target']" :filterable="true" :format="formatFn" @change="handleChange"> </el-transfer> ``` 其中，`v-model` 绑定的是已选中的列表项，`data` 是所有列表项的数据源，`titles` 是两个列表的标题，`filterable` 表示是否支持搜索过滤，`format` 是自定义列表项渲染函数，`@change` 是选项发生变化时触发的事件。 2. 在 Vue.js 中定义相应的数据和方法，例如： ``` data() { return { selectedItems: [], dataList: [ { key: 1, label: 'Item 1' }, { key: 2, label: 'Item 2' }, { key: 3, label: 'Item 3' }, { key: 4, label: 'Item 4' }, { key: 5, label: 'Item 5' } ] } }, methods: { formatFn(item) { return `${item.label} [${item.key}]` }, handleChange(selectedItems) { console.log('Selected items:', selectedItems) } } ``` 其中，`selectedItems` 是已选中的列表项，`dataList` 是所有列表项的数据源，`formatFn` 是自定义列表项渲染函数，`handleChange` 是选项发生变化时触发的事件。以上就是使用 Element Plus 中的穿梭框组件的基本方法。如果需要更详细的说明或示例，请参考 Element Plus 的官方文档。