el-transfer

Element ui 改变el-transfer 穿梭框的大小

修改el-transfer左右两个穿梭框的高度和宽度，具体效果如下正常大小的穿梭框修改之后的，主要在style中加上如下样式即可/deep/.el-transfer-panel{width:470px;
无火的残烬·2024-01-05 17:56

怎么拿到el-transfer的右边的穿梭框的值

1.首先拿到右边穿梭框的索引：this.value,fromData假设是左边的值2.this.value.map(item=>{this.arr.push(this.fromData[item])})此时拿到的this.arr就是右边穿梭框的值
cyh_e615·2023-12-22 21:35

关于element中 el-Transfer 实列

需要实现的效果：先附上官网：https://element.eleme.cn/#/zh-CN/component/transfer：官网默认实例exportdefault{data(){constgenerateData=_=>{constdata=[];for(leti=1;i在这里遇见俩坑：data一开始的数据1在展示leftDate的时候无法绑定数据时：定义一个新的数组去接受2注意数据类型是
Dkodak·2023-12-18 16:08

element el-transfer穿梭框的使用，自定义穿梭框的数据项

1：查看element官方文档可以了解到el-transfer穿梭框的基本使用方法，本文主要介绍数据项的自定义渲染和右侧列表元素变化时触发方法的实现。
爬坑的小白·2023-12-16 21:20

【仿el-transfer穿梭框】el-tree+el-table组合实现，踩坑记

效果图如下：样式代码：确认取消主要思路就是左树右表，通过树的复选框勾选事件，选中项push到临时数组，点击右箭头赋值给右侧的列表通过列表的复选框勾选事件，重新设置勾选节点数组，踩坑也就是在这里踩的仅贴相关代码，有啥问题欢迎沟通交流//树复选框事件handleCheckChange(data,checked){//向临时数组里追加选中项if(checked){this.tempArr.push(da
办公室的忍者·2023-11-29 15:27

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

这是饿了么的组件穿梭框data(){return{loading:false,inputForm:{id:'',gridName:'',gridId:'',projectName:'',projectId:'',type:''},data:[],value:[]}},data中的数据格式右侧数据回显前提是左侧的数据中包含了右侧的数据，这么说有点绕看代码data中是所有的数据，value是右侧的数据
CV猿码人·2023-11-05 11:21

vue3 + element plus+ts 实现穿梭框右侧数据上下移动功能

需求实现elementplus中的穿梭框（即el-transfer）右侧数据上下移动功能。我知道网上有很多类似的例子，但是vue3+ts+elementplus就我这一个，能复制总
白白布凯西·2023-11-05 07:43

修改el-transfer穿梭框的宽度

el-transfer穿梭框默认的宽度是200px,我们在可以通过修改样式来增加穿梭框的宽度，找到node_modules\element-ui\lib\theme-chalk\index.css搜索el-transfer-panel
wangshuai0927·2023-10-13 23:14

element-ui el-transfer添加拖拽排序功能

//html部分提交//js部分value:number[]=[]data:Array=[{sort:1,key:5001,label:'序号'},{sort:2,key:5002,label:'告警编号'},{sort:3,key:5003,label:'告警序号'},{sort:4,key:5004,label:'告警时间'},{sort:5,key:5005,label:'告警类型'}]fo
krifyFan·2023-10-11 14:45

ElEment el-transfer穿梭框实现拖拽功能(包含多选拖拽)

目前项目中需要实现一个可拖拽的穿梭框并且是要多选，看了网上很多资料只有单选拖拽,自己动手丰衣足食吧！首先在element组件库提供的穿梭框组件的基础上去增加拖拽功能这里我们要用到一个第三方拖拽组件sortablejs安装sortablejsnpmisortablejs--save-devhtml代码{{option.workingProcedureName}}js代码data数据importSor
juvenile_Li·2023-09-27 04:10

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

一、组件的使用1.element-ui提供了一些属性1）:titles="['待选用户','已选用户']"2）是否可搜索filterable是否可搜索boolean—falsefilter-placeholder搜索框占位符string—请输入搜索内容filter-method自定义搜索方法function——filterMethod(query,item){returnitem.userName
coinisi_li·2023-08-27 05:18

vue-element-穿梭框表格el-transfer

左边表格是调后台接口所得到的，不调接口可以自己写点数据的哈，在实现穿梭框的同时又自己写了删除列表功能（弹出框哦），可删除可恢复。下面是HTML代码批量加入删除列表批量取消{{row.musicTitle?row.musicTitle:'暂无'}}{{row.musicName?row.musicName:'暂无'}}删除试听{{row.musicTitle?row.musicTitle:'暂无'}
Aloye_喜樂·2023-08-07 05:45

关于el-transfer样式错乱的问题

刚将el-transfer放置组建中的时候是这样的：但是文档中是这样的：在各方面代码都核对了一遍，并没有出错。无奈只能检查元素一个个看样式了。
@凌晨三点半·2023-06-22 03:55

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

记录一条在使用el-transfer遇到的问题，右边框中的值是通过查询数据库中的值显示的，基本测试的时候都没有问题，让同事给测试，然后发现从右往左移数据需要点两次才能移过去，然后点击保存也显示key已经存在无法保存
7a7a·2023-06-22 03:24

el-transfer（穿梭框）一边数据为空时，尝试添加至另一边报错：Cannot read property ‘0‘ of null at patchBlockChildren (runtime-

data(){constloadTransferData=()=>{const_this=thisasany;consttransferData={data:[]asArray,value:[1,2,3],};for(leti=1;i<=15;i++){transferData.data.push({id:i,name:`备选项${i}`,status:i%4===0,});}returntran
MoonHolder·2023-06-22 03:54

关于el-transfer右侧数据显示的问题

问题提出近期做项目需要使用穿梭框，就高高兴兴地开始贴代码。把从后台取过来的数据放在穿梭框左侧，用props对属性进行重命名presetProps:{key:'presetCode',//valuelabel:"presetName",//name},在给右侧添加数据时，数据是可以进去，但是左侧框依然存在相同数据。百度了很久都没找到相似问题，是我太蠢了咩~问题解决在不使用后台数据的情况下，发现左右框
Norah_Yang·2023-06-22 03:53

【vue+el-transfer】穿梭框实现及遇到的bug，已解决

昨晚加班写的穿梭框组件，一边写一边遇到bug，果然只有bug才会让你印象更深刻，更值得记录封装成组件FreezeTransfer效果如下：主要参考了官网上可搜索的这个示例先说遇到的bug，然后贴完整的代码1、el-transfer
花椒和蕊·2023-06-22 03:23

手写可拖动穿梭框组件CustormTransfer vue实现示例

目录本文内容最终效果图组件html布局穿梭框左侧内容穿梭框右侧内容穿梭框中间向左、向右按钮把排序好的穿梭数据传给父组件整体代码小结本文内容需求是实现类似el-transfer的组件，右侧框内容可以拖动排序
·2022-11-12 13:04

自定义穿梭框实现详解 table 穿梭框

业精于勤荒于嬉需求描述element的穿梭框el-transfer使用起来样式很受限制，一般我们需要根据自己的需求实现数据的灵活选择，左右穿梭，就需要用到自定义的穿梭框了思路分析封装自定义的穿梭框，要考虑的是自己的需求样式
小智大愚·2021-03-03 13:50

vue element el-transfer增加拖拽功能

芯资管项目要求el-transfer增加拖拽排序，左右上下互相拖拽功能；原来的组件不支持拖拽，这里要用个第三方脱宅组件sortablejs首先安装sudonpmisortablejs--save-devhtml
·2021-01-15 12:10

vue element el-transfer增加拖拽功能

芯资管项目要求el-transfer增加拖拽排序，左右上下互相拖拽功能；原来的组件不支持拖拽，这里要用个第三方脱宅组件sortablejs首先安装sudonpmisortablejs--save-devhtml
早饭君·2021-01-14 20:20

vue element el-transfer增加拖拽功能

芯资管项目要求el-transfer增加拖拽排序，左右上下互相拖拽功能；原来的组件不支持拖拽，这里要用个第三方脱宅组件sortablejs首先安装sudonpmisortablejs--save-devhtml
早饭君·2021-01-14 20:54

element el-transfer穿梭框的使用，自定义穿梭框的数据项

本文概述基本穿梭框效果自定义数据项实现右侧列表元素变化时触发方法本文概述查看element官方文档可以了解到el-transfer穿梭框的基本使用方法，本文主要介绍数据项的自定义渲染和右侧列表元素变化时触发方法的实现
涛声10_16·2020-08-22 14:09

Vue el-tree与el-transfer的结合使用之el-tree-transfer

原文以及github地址效果：首先下载插件：npminstallel-tree-transfer--save或npmiel-tree-transfer-S结果如下即成功：然后引入：importtreeTransferfrom'el-tree-transfer'//引入exportdefult{data(){return:{title:["待选","已选"],//标题类型：Array必填：false
杀生丸H·2020-08-22 11:44

element穿梭框右侧选中数据排序问题

el-transfer组件有一个属性target-order。。。original：默认值，顺序和数据源保持一致；push：新加入的元素在排在最后；unshift：新加入的元素排在最前。
cuifangfang1177·2020-08-21 03:44

element transfer 不使用render-content方法给每一行加title的一种思路

原文地址：https://segmentfault.com/a/1190000020956789问题描述最近在使用element-ui的el-transfer时候遇到一问题：穿梭框一行显示一条数据，但是有的数据比较长
user_name·2020-08-20 22:11

element transfer 不使用render-content方法给每一行加title的一种思路

原文地址：https://segmentfault.com/a/1190000020956789问题描述最近在使用element-ui的el-transfer时候遇到一问题：穿梭框一行显示一条数据，但是有的数据比较长
user_name·2020-08-20 22:11

el-transfer组件自定义左右列表宽度

el-transfer组件自定义左右列表宽度我们知道element-ui是自带样式的，但是有时候我们需要覆盖掉它们自带的样式，比如自定义el-transfer列表宽度1首先打开后台信息，看看自己想要修改的样式的类
出于蓝·2020-07-05 01:34

el-transfer高度（element版本2.13.0）

包含关系：css:.table-custom-drawer{height:100%;}.drawer{height:100%;}.drawer/deep/.el-drawer__body{height:100%;}.table-column-transfer{height:calc(100%-160px);width:100%;margin:10px;}.table-column-transfer
blank_lion·2020-01-06 11:35

element transfer 不使用render-content方法给每一行加title的一种思路

原文地址：https://segmentfault.com/a/1190000020956789问题描述最近在使用element-ui的el-transfer时候遇到一问题：穿梭框一行显示一条数据，但是有的数据比较长
aqiongbei·2019-11-10 15:01
上一页 1 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他