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

努力搬砖小苦瓜

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

阅读量4.5k

点赞数 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
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
获取element ui 穿梭框右边选中的数据

获取element ui 穿梭框右边选中的数据及选中右侧目标数据并输出值
复制链接

扫一扫

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

yzshen123456的博客

07-16

6409

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

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

最新发布

weixin_38656011的博客

04-25

126

el-transfer 穿梭框获取接口传值

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

weixin_34138056的博客

11-12

4510

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

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

weixin_51722520的博客

11-03

1539

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

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

weixin_46051095的博客

06-28

2641

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

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

05-28

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

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

12-05

vue+element-ui实现穿梭框数据自定义排序实现了穿梭框右侧数据自定义排序的功能

前端 elementUI 穿梭框大量数据分页处理

03-03

资源为elementui 穿梭框组件做的修改，主要处理大量数据时卡顿的问题，做了分页处理，在elementui工程中直接把该资源放到项目中可直接使用，index.vue为demo

vue按需引入element Transfer 穿梭框

08-29

主要介绍了vue按需引入element Transfer 穿梭框的相关资料,需要的朋友可以参考下

vue2基于element-ui封装的穿梭框，可树形，可平级，可多选

10-10

vue2基于element-ui封装的穿梭框，可树形，可平级，可多选

jQuery双向选择穿梭框代码

06-24

jQuery双向选择穿梭框代码是一款jQuery基于layui制作的双向选择穿梭框，通过json异步获取穿梭框数据列表，点击选中列表穿梭框特效。

Vue Element UI 完整版前端框架

07-31

Element UI 完整版源码可用 vue+Element-UI 前端框架

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

amberom的专栏

04-19

693

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

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

coinisi_li的博客

08-18

4652

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

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

kristen999的博客

05-30

4958

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

vue-element Transfer 穿梭框

weixin_45849851的博客

11-18

555

vue 用穿梭框实现列的展示与不展示 HTML代码 + 注释 <el-dialog width="40%" title="自定义展示列" :visible.sync="customPresentationLog" append-to-body class="import-dialog" :close-on-c

vue实现穿梭框功能（ES6语法）

weixin_44409569的博客

04-26

6761

1、Vue结合ES6语法实现穿梭框。简单写了CSS样式和HTML。左边为复选框按钮，可全选可单选，选中后点击按钮到左侧。右边实现效果同理。并用计算属性动态计算出每个数组共多少条数据，选中了多少条。实现效果图如下： 1、样式代码实现 <template> <div class="hello"> <div class="transfer"> <div class="transfer_left"> <div class

Vue获取下拉框中选中的value值和label值

Vanllen_moon的博客

04-11

8676

前提：使用v-for循环渲染选择项，如下图例子例子中allVillage为数组，每个数组元素是对象，对象中含有id和name :value与v-model的值是互相绑定的，可以在data中定义变量进而直接获取到如图，可以通过this,paneOneForm.villageId拿到value中绑定的id值获取选中的文本值，即label值，结合使用数组的find方法 let obj = {} obj = this.allVillage.find((item) => item.id === th

element ui穿梭框加层级描述

06-14

要在Element UI的穿梭框中加入层级描述，可以使用穿梭框的 slot-scope 属性和自定义模板的方式来实现。具体步骤如下： 1. 在穿梭框中添加左侧和右侧的 slot-scope 属性，分别命名为 left-footer 和 right-footer。 ``` <el-transfer v-model="value" :data="data" :titles="titles" :filterable="filterable" :props="props" :left-footer="leftFooter" :right-footer="rightFooter"> </el-transfer> ``` 2. 在 data 数组中添加一个层级字段，用于描述数据的层级结构。 ``` data: [{ key: 1, label: '选项1', level: 1 }, { key: 2, label: '选项2', level: 2 }, { key: 3, label: '选项3', level: 2 }] ``` 3. 在 left-footer 和 right-footer 模板中，通过 v-for 指令遍历数据，并根据层级字段来添加不同的缩进。 ``` data() { return { leftFooter(h) { return ( <div> <span>左侧列表</span> <hr style="margin: 10px 0;" /> <div> { this.data.map(item => { if (item.level === 1) { return <div>{item.label}</div> } else { return <div style="padding-left: 20px;">{item.label}</div> } }) } </div> </div> ) }, rightFooter(h) { return ( <div> <span>右侧列表</span> <hr style="margin: 10px 0;" /> <div> { this.data.map(item => { if (item.level === 1) { return <div>{item.label}</div> } else { return <div style="padding-left: 20px;">{item.label}</div> } }) } </div> </div> ) } } } ``` 4. 最后，根据实际需求调整缩进的样式即可。这样就可以在Element UI的穿梭框中加入层级描述了。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交