基于element-ui的transfer组件改造的可上下左右调整数据的transfer组件

最新推荐文章于 2024-05-22 14:22:01 发布
最新推荐文章于 2024-05-22 14:22:01 发布
阅读量6k 收藏 10
点赞数 4
分类专栏： experience 文章标签： vue可用的transfer组件 上下移动的transfer组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011070165/article/details/88873484
版权

蛋疼的需求

蛋疼的甲方提了蛋疼的需求，要数据进行上下排序，直接导致不能使用element-ui提供的组件，虽然很想怼回去，出于敬业，既然甲方提了那就实现呗，so。。。

描述

大致就是在沿用了el-transfer的样式，并且在他原有的基础上添加了上下移动的功能。对于上下移动的功能，可以只限左边上下移动。也可以只限右边，或者两边都可以进行上下移动，按钮只有在检测到符合移动条件的数据时才变为可操作。

实现效果

在这里插入图片描述

代码传送门

我是传送门，点我！

ranran0816007
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于element-ui的穿梭框（el-transfer）实现点击上下移动
qq_42360279的博客
09-05 1139
基于elementui实现点击上下移动数据内容
vue3.0+elementplus/elementui 穿梭框+上下移动功能
m0_63872974的博客
02-21 1762
vue3.0 element plus/elementui Transfer 穿梭框+上下移动功能的使用
vue3 + element plus+ts 实现穿梭框右侧数据上下移动功能
byebukesi的博客
08-25 1683
element plus实现transfer穿梭框右侧数据上下移动的功能
Element-UI穿梭框去掉左箭头按钮
zhourongxiang1的博客
03-13 734
解释一下上面的代码：等待dom元素加载完成后，在mounted中删除左箭头按钮。左箭头按钮的父元素是el-transfer__buttons,它的第一个孩子是要删除的左箭头按钮。之后在vue文件中使用import $ from 'jquery’导入jquery。访问localhost:8080/#/transfer便能查看穿梭框页面。在Terminal中输入命令。
el-transfer和el-tree进行结合搞一个树形穿梭框
最新发布
bbkhhvv的博客
05-22 1528
由于业务需求需要在穿梭框里使用树形结构，但是本身element里并不支持，于是参考了别的大佬发的文章作为思路及后续自己新增了一些处理功能。
element的select弹出框的小箭头怎么去掉
lotpyve的博客
10-23 1673
值得注意的是，如果我们在开发过程中，团队合作，所以不能把 弹出层 直接挂载到 body 上面去，此时我们可以加上 :popper-append-to-body="false"，对于 elementUI 的大部分弹出层可以用 :append-to-body="false" 控制不直接挂载到 body 上面，不过对于 el-select 需要使用 :popper-append-to-body="false"此时，我们可以在 html 元素中找到这个箭头的标签，display : none 就好了。
el-transfer标签左右切换按钮上下布局
qq_47888106的博客
01-12 1527
el-transfer标签左右切换按钮上下布局
基于elementu的Transfer组件实现上移下移功能
zhangdui2016的博客
09-30 1163
又被调去改项目bug了，心累。简单的改个字就行，不简单的，就是有了按钮，让你去做逻辑。偏偏你原来不是这个项目组的，所以根本不懂他的逻辑。下面说的这个问题是介于两者之间的，既不简单，还有点逻辑。 原型就是下面这样： 但是他在这个基础上还有选中项上移下移的功能。想法是好的，你倒给实现了啊，只想不说那是项目经理啊哥哥。 这里如果简单想的话，就是遍历所有项，然后判断是否选中，如果选中就操作，没有就跳过。有坑如下： 1、上移操作，遍历是从0-最后，没毛病。下移操作，就是从最后-0了，因为如果按照0-最后这
基于element-ui的穿梭框（el-transfer）实现点击上下移动（按钮写入每行）
qq_42360279的博客
09-09 3142
【代码】基于element-ui的穿梭框（el-transfer）实现点击上下移动（按钮写入每行）
movable-view 组件(可上下左右拖动 )
m0_53912016的博客
07-26 397
代码】movable-view组件(可上下左右拖动)
vue+elementui 实现transfer组件，对里面增加一点功能，修改一些问题
12-27
对原先的功能做了一些改进，以及增加一点额外需求功能
tree-transfer：一个基于vue和element-ui的树形穿梭框及邮件通讯录。一种基于Vue和element-ui的树形穿梭箱组件。 Vuecli3版本见https：github.comhql7wl-tree-transfer示例见->
02-06
此组件功能组件element-ui的组件，但是里面的数据是树形结构！，， el-tree-transfer依赖的element-ui组件分别是， ，和最主要的写成！不是在element-ui的穿梭框组件上的扩展，而明显参照了其外观样式和功能。 因为...
基于element-ui封装可搜索的懒加载tree组件的实现
11-20
确定了需求当然第一时间就去网上找有没有小伙伴已经实现了相关组件，最后….,还是自己实现一个吧（由于公司采用的element-ui所以基于el-tree进行改造）；【这只是自己实现的一种思路，希望大家多多指正】 1.懒加载树...
vue+element-ui实现穿梭框数据自定义排序
12-05
Element-UI是基于Vue.js的一套丰富的UI组件库，其中包括了穿梭框组件，它常用于在两个列表之间进行数据的选择和移动。自定义排序功能在实际应用中十分常见，能够提升用户体验，使用户更方便地管理数据。 首先，我们...
group-transfer:可分组的穿梭框---在element-ui的原始码上修改-修改
03-24
公共组件-可分组穿梭框道具以及活动无缝对接饿了么ui的穿梭框，预览道具的一点说明参数说明类型任选值默认值数据数据源数组[{键，标签，已禁用，孩子：[]}] -- [] 道具数据源的随机别名对象{键，标签，已禁用，儿童}...
Element-UI 使用手册文档 V2.4.6 （Vue版本）.pdf
11-18
Element-UI 使用手册文档 V2.4.6 （Vue版本） 致谢 开发指南 安装 快速上手 国际化 自定义主题 内置过渡动画 Basic 基本组件 Layout 布局 Container 布局容器 Color 色彩 Typography 字体 Icon 图标 ...
vue+elementui穿梭框+上下移动功能
热门推荐
weixin_42618492的博客
10-31 1万+
elementUI组件样式： 需要的样式：增加上移、下移功能 下面就看一下的我实现方法（希望大家有更好的方法） 1.首先在底部内容区增加需要的功能按钮，如：上移，下移，确定，取消【这里是为了数据操作之后，确定之后再进行相爱一步操作】，还有就是右侧列表元素被用户选中 / 取消选中时触发的监听事件【right-check-change】 2.数据roleData【所有角色】，...
【vue2】element-ui el-transfer扩展 实现多列效果一对多
有趣愉悦的学习冒险
02-21 2885
element-ui el-transfer扩展 实现多列效果一对多
QML:ListView实现上下滑动的数字选择器
ACE_YOUNG的博客
06-20 632
QML:ListView实现上下滑动的数字选择器。
element 表格上下合并且分页
04-28
element 表格上下合并且分页是一种常见的需求，特别是在处理大量数据时。上下合并的操作可以使表格更加紧凑，而分页则可以让用户更加方便地浏览数据。 要实现 element 表格上下合并且分页，首先需要在表格头部设置合并列数。这样就可以将一些列合并成一个单元格，从而节省空间。接着，在数据源中标记每个单元格是否需要合并，以及合并的行数。在表格渲染时，根据数据源的标记来进行合并操作。 对于分页，element 表格提供了多种分页方式，包括分页大小、分页布局等。我们可以根据实际情况灵活选择，并在处理数据时将分页信息传递给表格组件。 总而言之，element 表格上下合并且分页可以使用户更加便利地浏览大量数据，并提高数据的可读性和易用性。要实现这一需求，我们需要在表格头部设置合并列数，并在数据源中标记需要合并的单元格，同时选择合适的分页方式。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值