vue3在使用element-plusCollapse 折叠面板时，文字未折叠的情况

最新推荐文章于 2024-08-07 19:03:55 发布
最新推荐文章于 2024-08-07 19:03:55 发布
阅读量293 收藏
点赞数 10
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43671292/article/details/140986957
版权

 问题：

如图所示，文字未被折叠

经查询发现是多嵌套一层div，导致样式失效

去除div之后，折叠正常显示。

酱賊贼
关注
  • 10
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue3项目 使用 element-plus 中 el-collapse 折叠面板
lzfengquan的博客
04-16 1679
我这里还用到了 el-steps ，最外层的 是自己写的样式，因为我一个页面中使用了两次el-steps ，发现样式会有干扰。最近接触拉了一个项目，使用到 element-plus 中 el-collapse 折叠面板，发现在使用中利用高官网多多少少的会出现问题。效果图 ： 当点击 了查看按钮时，弹框出现，且默认展开第一个数据，且每次的展开或者收起都有对应的样式，可见下图左侧的图样，我们的数据结构是双数组，如果你和我一样直接copy, 如果是一个对象数组或者数组吧，只需把外层的数组转化即可。
基于 vue-element-admin 升级的 Vue 3 + TypeScript + Element-Plus 版本后台管理系统正式开源
热门推荐
有来技术
05-01 4万+
项目基于vue-elemnent-admin升级的Vue3版本,代码结构基本和vue-element-admin一致，代码风格参考Vue.js社区，CSS遵守BEM规范 ，站在巨人的肩膀不仅是为了看的更远，更多的是一种致敬、延续和希望走的更远。
vue3使用element-plus及其icon
Y_soybean_milk的博客
05-05 4732
element-plus 1、安装依赖包 npm install element-plus --save 2、在main.js中引入并注册 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/dist/in
vue3使用element-plus
游小北的博客
11-26 1万+
element-ui 是配合 vue2 使用，element-plus 是配置 vue3 使用的。
vue-element-admin--使用体验
IT利刃出鞘的博客
06-25 1万+
本文用示例介绍vue-element-admin的用法。
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...
vue3-element-admin:vue-element-admin的vue3版本
03-08
请使用，它将跟上主更新当前版本是在vue-cli上构建的v4.0+ 。 如果发现问题，请输入。 如果要使用旧版本，可以将分支切换到 ，它不依赖于vue-cli 该项目不支持低版本的浏览器（例如IE）。 请自行添加polyfill。准备
vue3+element-plus+admin
04-12
Vue3 + Element-Plus + Admin ...这个项目实例适合学习 Vue3 的最新特性、Element-Plus 的使用，以及如何在实际项目中实现用户权限管理。开发者可以通过研究这个项目，掌握前端开发的最佳实践，并应用于自己的项目中。
使用 Vue.js 构建大屏可视化系统
qq_42072014的博客
08-04 983
通过上述步骤，你已经具备了构建一个完整的 Vue.js 大屏可视化系统的知识。根据具体需求，你还可以添加更多高级功能，如动态加载图表数据、实时数据流等。
JAVA毕业设计|ssm基于java的健身房管理系统的设计与实现vue包含文档代码讲解
2401_86480677的博客
08-03 341
前面提到的系统分析，系统设计最主要还是进行功能，系统操作逻辑的设计，也包括了存储数据的数据库方面的设计等内容，系统实现就是一个最终的实施阶段，将前面的设计成果进行物理转化，最终出具可以运用于实际的软件系统。如图5.4显示的就是健身器材列表页面，此页面提供给管理员的功能有：对全部的健身器材的一个管理、可以根据健身器材名称进行模糊查询、根据时间区间来进行判断器材的是否损坏。如图5.1显示的就是会员管理页面，此页面提供给管理员的功能有：对会员信息的一个管理，不同会员看到的页面是不一样的，会员信息也是不同的.
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 669
SignList这三个页面就是需要切换的页面。
Vue的所有面试题
本人小可爱
08-06 475
在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作。当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步。执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。页面显示的数据和data中的数据已经保持同步了，都是最新的。
vue实现PC端图片放大缩小可鼠标拖动，鼠标滚轮控制放大缩小完整代码付效果图
a_靖的博客
08-07 97
vue实现放大缩小，拖动盒子完整代码付效果图
视频教程 - 自研Vue3 Tree组件高级功能：虚拟滚动新增节点实现自动滚动
felix_alone2012的博客
08-03 218
感谢小伙伴们对本套自研vue3 tree组件教程的关注，在前一篇《媲美Element Plus JuanTree终极实战：虚拟滚动》的功能演示中发现了小bug，特地整理了相关录屏来说明怎么一步步解决bug的，来回馈小伙伴们的支持。
Vue3：【props、emit 和 components】 在 setup 语法糖和非语法糖中的使用
weixin_52268321的博客
08-03 407
Vue3：【props、emit 和 components】 在 setup 语法糖和非语法糖中的使用
简单介绍下vue3中为什么使用ref包裹数组会失去push的方法呢？
最新发布
m0_62626838的博客
08-07 122
2、简单的说就是当你使用ref定义一个响应式的数组时，此时你的数组时响应式的，但是当你对数组做push等方法时，就失去响应式了，这是因为在 Vue 的响应式系统中，属性的添加或删除被视为改变原始对象的引用，而不是改变原始对象本身。1、有的小伙伴在使用vue3的过程中想省事情，针对vue3的两种响应式，即ref与reactive往往会只选择使用ref,然后就报错数组没有push方法了。不，可以解决，要记住ref在setup中写要加上.vue,在模板结构中使用不加.value。
vue前端项目--路由vue-router
As_Yua的博客
08-07 575
早期的网站开发中，服务器负责生成完整的 HTML 页面，并将其发送给客户端展示。每个 URL 对应一个特定的控制器(Controller)，该控制器负责处理请求并生成相应的 HTML 内容。这种方式有利于搜索引擎优化（SEO），因为搜索引擎可以轻松抓取完整的 HTML 内容。缺点是页面更新时需要重新加载整个页面，导致用户体验不佳，且 HTML 和业务逻辑混杂在一起，难以维护。随着 Ajax 技术的出现，前后端分离成为可能。
vue3 怎么使用element-plus
09-01
要在 Vue3 中使用 Element-Plus，你需要按照以下步骤进行配置： 1. 首先，安装 Element-Plus。你可以使用 npm 或者 yarn 来进行安装，具体命令如下： ``` npm install element-plus ``` 2. 在你的 main.js 文件中进行配置。导入 Element-Plus，并引入它的样式文件。最后使用 `createApp` 的 `use` 方法来注册 Element-Plus。示例如下： ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/theme-chalk/index.css' createApp(App).use(ElementPlus).mount('#app') ``` 3. 现在你就可以在你的 Vue3 项目中使用 Element-Plus 的各种组件了。你可以按照 Element-Plus 的文档来使用它们。比如，如果你想使用 Icon 组件，你可以按照它的配置方式进行使用。 总结一下，要在 Vue3 中使用 Element-Plus，你需要先安装 Element-Plus，然后在 main.js 文件中导入并配置它，最后就可以在你的项目中使用 Element-Plus 的各种组件了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3使用element-plus](https://blog.csdn.net/m0_66492535/article/details/128048780)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [怎么在Vue3中正确使用ElementPlus，亲测有效，避坑](https://blog.csdn.net/qq_44017116/article/details/127713704)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值