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

最新推荐文章于 2024-05-07 13:49:54 发布

人生理想一口好牙

最新推荐文章于 2024-05-07 13:49:54 发布

阅读量2.6k

点赞数

文章标签：前端框架 javascript

本文链接：https://blog.csdn.net/weixin_46051095/article/details/125496850

版权

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

1. 使用target-keys绑定右侧框数据

//HTML  此处只绑定target-keys的数据做演示 穿梭框具体实现效果需要参考Ant文档
<a-transfer :target-keys="tableTargetKeys">
</a-transfer>

//JS
data(){
	//绑定需要在右侧框显示的KEY 
	tableTargetKeys:['8106059994556358656','8106059994917068800','8106059995059675136']
}

在这里插入图片描述

这样就可以通过一个数组绑定右侧值了，同理，和后端对接时也只需要绑定这个KEY

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

人生理想一口好牙

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
AntDesign 穿梭框(Transfer)如何绑定右侧框数据

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

扫一扫

前端react+Ant Design 给穿梭框Transfer 添加导入导出按钮，难点在于导入数据后怎么赋值给右侧

m0_72154126的博客

06-04

847

react+Ant Design 给穿梭框Transfer

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

03-03

穿梭框（el-transfer）是其中的一个重要组件，用于实现两个列表之间的数据移动，常用于数据筛选和分配场景。然而，当穿梭框处理的数据量非常大时，可能会导致页面卡顿，影响用户体验。针对这个问题，我们可以通过...

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

vue3+Ant Design Vue Transfer 穿梭框实现拖拽式列表

枫ゞ的博客

05-13

3639

实现拖拽式列表必备！！！！！最近在写公司项目时需要在Ant Design Vue穿梭框右侧实现拖拽列表排序功能，而Ant Design Vue本身无此功能，所以自己写了一个，实现代码及原理如下： //使用到VUE中的： @dragstart 拖拽开始时在被拖拽元素上触发此事件 @drop.prevent 被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 @dragover.prevent 拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上 ...

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

05-28

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

antd的穿梭框a-transfer实现：树形列表，父节点多选，子节点单选，父子节点联动

最新发布

m0_56065511的博客

05-07

572

穿梭框左边的列表需要满足父子节点联动：勾选子节点时默认选中父节点，选中父节点时默认勾选子节点（初次默认选中第1个子节点，否则选中上次勾选的子节点），取消勾选父节点同时取消勾选的子节点；1，穿梭框中为树形列表，a-transfer + a-table（table 数据为treeData）；穿梭到右边的列表不需要父子节点联动，穿梭过去时需要保留子节点选中状态，同时父节点清空选中状态。2，父节点为多选，子节点是单选。

ant-design实现树的穿梭框，穿梭后右侧是已选树（一）

Embrace924的博客

05-12

3822

/ 处理树的内部自定义内容return (});generateTree的四个参数：treeNodes （树数据）, checkedKeys （已选值）, searchValue（搜索值）, disabled（是否禁止）左边的treeNodes ：原本的树/通过搜索后的树return (

ant-design 中a-transfer穿梭框组件的使用

reembarkation的博客

06-24

4263

a-transfer 组件的使用

Ant-Design 中a-transfer穿梭框组件的使用

PIKapikaaaa的博客

06-29

4539

Ant Design组件中穿梭框（Transfer）的详细使用。解释了每行代码，并赋予案例

vue按需引入element Transfer 穿梭框

08-29

Element Transfer 穿梭框是 Element UI 库中的一种组件，用于在两个列表之间 transfer 数据。该组件可以帮助开发者快速实现数据的transfer操作，提高了开发效率和用户体验。二、为什么需要按需引入 Element ...

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 穿梭框右边选中的数据

weixin_45656587的博客

12-22

4603

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

ant design vue ＜a-transfer＞简单穿梭框实现

a nice day

02-17

1372

简单穿梭框

ant Design穿梭框Transfer采坑笔记

ssza02的博客

09-05

7369

最近有个需求需要使用穿梭框功能，看着antd都有现成组件，就毫不犹豫开发起来，结果采坑绕了一大圈才实现了想要的业务逻辑。先来看看官方的demo：官网链接直达：https://ant.design/components/transfer-cn/ 根据官方的基本用法，代码如下： <Transfer dataSource={mockData} titles={['Source', 'Target']} targetKeys={targetKeys}

antd 穿梭框获取数据

qq_41379860的博客

05-29

1040

import React, { useState } from ‘react’; import { Transfer } from ‘antd’; import type { TransferDirection } from ‘antd/es/transfer’; import { Avatar } from ‘antd’; import { UserOutlined } from ‘@ant-design/icons’; interface RecordType { key: string; title:

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

amberom的专栏

04-19

733

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

ant-design-vue 实现树形穿梭框

来了波，兄嘚

06-30

5849

版本：“ant-design-vue”: “^1.7.6” 参考大佬注：大佬的为ts+vue3版，下面本人改动而来，方便vue2.0的小伙伴直接拿来用父组件： <template> <div class="transfer-wrapper"> <transfer ref="transferRef" :tree-data="treeData" :edit-key="editKey" class="tree"

ant-design实现树的穿梭框，穿梭后右侧是已选树（二）

Embrace924的博客

05-15

1321

根据上一篇，进一步实现树的穿梭框。

获取 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); } ```

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

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

提交