vue组件-Collapse 折叠面板+Transfer 穿梭框 实战

最新推荐文章于 2024-08-06 15:07:52 发布
最新推荐文章于 2024-08-06 15:07:52 发布
阅读量677 收藏 1
点赞数 1
分类专栏： 前端-vue 文章标签： javascript vue.js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oWaitForYou/article/details/109185024
版权

vue组件-Collapse 折叠面板+Transfer 穿梭框

公司无前端，本人前端后端一起搞，遇到的问题记录下来，帮助遇到同样的问题兄弟姐妹们
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
左右穿梭，
在这里插入图片描述
勾选右侧你需要变更的数据（取消，全选，部分选择，数字跟着变化）
在这里插入图片描述
在这里插入图片描述

勾选后，点击确认按钮 弹框 的同时 赋值
在这里插入图片描述
在这里插入图片描述
最后确认提交
在这里插入图片描述

折叠面板
在这里插入图片描述

oWaitForYou
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2-collapse-Vue Collapse是一个灵活的内容切换插件，用于手风琴列表或任何其他有条件的内容呈现。-Vue.js开发
05-27
Vue折叠Vue.js 2插件允许开发人员创建非常自定义的手风琴列表。 这意味着自定义Accordio Vue非常灵活并且易于定制。Collapse Vue.js 2插件允许开发人员创建非常自定义的手风琴列表。 这意味着它非常灵活并且易于定制手风琴插件。 插件本身不为任何组件或元素提供任何样式。 唯一包含的css使用max-height和transition属性支持最基本的上下滑动动画。 对于需要创建自定义手风琴列表的开发人员来说，VueCollapse还是一个工具。 带有实时示例的文档安装
完善的vue+elementui的自定义transfer组件
10-16
对之前已做的transfer组件做完善，新增已选列表搜索功能，修复搜索数据重复问题
vue实现折叠组件-collapse
热门推荐
Only_ruiwen的博客
11-09 1万+
相信大家对于下面的列表形式应该不陌生吧，至少我个人在后台OA系统的时候就用到了，那么我来聊下这样形式的列表，应该怎么封装成为一个公共的组件。（代码参考了iview用于个人学习之用） 一.列表组件参数设置 每一个公共组件都应该约定好参数，定义好回调函数所传递参数。不应该与业务组件和业务逻辑相互耦合。 这个组件的约定参数和使用方法如下： <Collapse v-model="value1" @...
13-el-tree-transfer自定义一键展开或一键收回
weixin_46675693的博客
07-17 220
找到第一个$el:div.el-tree，即表示当前的$el所在的这是对象实例就是左边树结构的实例（可以看到左边树结构的实例是当前组件的第一个$children实例下的第二个$children实例，若加上filter属性的话，就是第三个$children实例，所以需要注意顺序）前提条件：项目使用了el-tree-transfer穿梭框组件，但需求希望左边树结构不展开，右边树结构展开，但该组件配置项只能全展开或全收起。同理，如果是没有设置全展开，那就需要将右边树结构全展示。简单记录一下安装使用。
vue 二级列表折叠面板
weixin_30672019的博客
05-16 1964
请求出来的数据是二级列表，需要点击一级列表展开相应的二级列表 data(){ return { info: [ {name:'一级菜单1',lists:[{price:1},{price:2}]}, {name:'一级菜单2',lists:[{price:1},{price:2}]}, {name:'一级菜单3',lists:[{p...
vue3 伸缩菜单组件
m0_58565372的博客
01-04 2120
3.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建navHeader文件，在navHeader文件下创建index.vue文件。4.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建navSide文件，在navSide文件下创建index.vue文件。2.在router文件下的index.ts写入。以上就是封装伸缩菜单栏组件的代码。
Vue-Vue-Router-Vuex-SSR:Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲
05-16
Vue-Vue-Router-Vuex-SSRVue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲
使用vue3+ant-design-vue+vite+ts开发的通用后台框架.zip
01-04
使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 ...
vue+element-ui实现穿梭框数据自定义排序
12-05
在本文中，我们将深入探讨如何使用Vue.js框架与Element-UI库来实现穿梭框（Transfer）数据的自定义排序功能。Element-UI是基于Vue.js的一套丰富的UI组件库，其中包括了穿梭框组件，它常用于在两个列表之间进行数据的...
Vue全家桶，Vue核心技术，Vue+Vue-Router+Vuex+SSR，实战精讲（无快进，目录清晰））
03-25
Vue全家桶.Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲（无快进，目录清晰）
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip
10-30
Vue.js是一个流行的前端JavaScript框架，以其轻量级、组件化、易学习和高性能的特点深受开发者喜爱。在这个项目中，Vue.js作为核心框架，用于构建用户界面。 首先，Vue-Router是Vue.js官方的路由管理器，它允许我们...
vue+elementui 实现transfer组件，对里面增加一点功能，修改一些问题
12-27
对原先的功能做了一些改进，以及增加一点额外需求功能
vue按需引入element Transfer 穿梭框
08-29
主要介绍了vue按需引入element Transfer 穿梭框的相关资料,需要的朋友可以参考下
vue 折叠面板
学习笔记666
03-20 787
【代码】vue 折叠面板。
Vue指令，折叠面板
2302_77072463的博客
10-07 303
点击展开或收起时，把内容区域显示或者隐藏。
Vue 封装一个折叠面板组件
单飞吧的博客
09-15 1286
效果，该组件使用了 Element 的一些 icon 图标，以及 过渡动画 el-collapse-transition 具体使用方法，主要使用方法 provide ，inject，this.$children 和 _uid （vue中无论递归组件，还是自定义组件，每个组件都有唯一的_uid） <!-- 折叠组件 --> <navigation-bar v-model="barName" accordion> <navigation-bar-item label="测试1
vue2 使用positon 折叠菜单（过渡）和页面全屏设置
weixin_44156156的博客
03-17 251
vue2 使用positon 折叠菜单（过渡）和页面全屏设置
Vue封装组件-可折叠面板 LjCollapse
08-04 1186
效果图： 使用： <LjCollapse title="这是标题" headColor="orange" width="400px" bgColor="rgba(41, 41, 41, 0.589)" > 这是内容... </LjCollapse> LjCollapse.vue: <!--LjCollapse--> <temp...
手把手教你打造Vue2项目中的自定义折叠组件
最新发布
Jarvan_I的博客
08-06 258
在现代前端项目中，折叠组件广泛应用于导航菜单、内容展示等场景。Vue2作为一款流行的前端框架，提供了丰富的组件化开发能力。本文将介绍如何在Vue2项目中自定义一个折叠组件。本文将带领大家了解如何在Vue2项目中创建一个自定义折叠组件，通过本文的学习，你将掌握组件的基本原理和实现方法，为项目增添更多交互性。小时候觉得5块钱很贵，10点很晚，一生很长，生活却很甜。长大后才发现，100块钱不够花，12点也不是很晚，一生很短，却异常苦涩！创建一个Vue2项目，并进入项目目录。不怕前端实现不了，就怕产品设计不好。
vue3.2 使用el-ement-ui的 Transfer穿梭框的代码实例
03-07
以下是使用 Vue3.2 和 Element-UI 的 Transfer 穿梭框的代码示例： ``` <template> <el-transfer v-model="transferData" :data="data" :titles="['Source', 'Target']" :filterable="true" :props="{ key: 'id', label: 'name', disabled: 'disabled', description: 'description' }" ></el-transfer> </template> <script> import { ref } from 'vue' import { ElTransfer } from 'element-plus' export default { components: { ElTransfer }, setup() { const transferData = ref([]) const data = ref([ { id: 1, name: 'Option 1', description: 'Description of option 1', disabled: false }, { id: 2, name: 'Option 2', description: 'Description of option 2', disabled: false }, { id: 3, name: 'Option 3', description: 'Description of option 3', disabled: true }, { id: 4, name: 'Option 4', description: 'Description of option 4', disabled: false } ]) return { transferData, data } } } </script> ``` 希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值