ant-design-vue的Collapse问题

最新推荐文章于 2024-07-29 23:05:19 发布
最新推荐文章于 2024-07-29 23:05:19 发布
阅读量2.3k 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45124380/article/details/119739205
版权
本文探讨了在使用ant-design-vue的Collapse组件时遇到的问题，包括Collapse未生效和在Collapse中渲染form验证不生效的情况。通过在a-collapse中添加forceRender属性，解决了组件懒加载后的内容不渲染问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Collapse未生效

lazy_use.js中导入

Collapse渲染 form验证不生效

在a-collapse中增加forceRender

        <a-collapse v-model="activeKey" :bordered="false">
          <a-collapse-panel key="inf_type" header="接入类型" :forceRender
最低0.47元/天 解锁文章
� 杰尼龟
关注
使用ant-design-vue的madal在table中，只能点击一次，并且会报错Avoid mutating a prop directly since...
丑小鸭变黑天鹅的博客
03-07 1288
使用ant-design-vue的madal在table中，只能点击一次，并且会报错一、问题描述二、解决办法 一、问题描述 最近学习过程中遇到这样一个问题。我想实现点击表格的每一行的修改按钮，都弹出一个modal框。 最初的思路（注意：之前用element-ui这么做没问题），封装一个modal组件，然后在父组件进行引入，当点击修改按钮的时候，改变显示与否的状态，并且传给modal子组件，子组件通过props接收。 但问题来了，点击第一次，可以正常弹出并且关闭，点击第二次modal框不弹了，并且始终报错 [
Vue3项目按需引入Ant-Design-Vue：解决Uncaught TypeError: Cannot read property ‘prototype‘ of undefined问题！
IT博客-wusheng_z
10-27 1096
Vue3项目按需引入Ant-Design-Vue：解决Uncaught TypeError: Cannot read property ‘prototype‘ of undefined问题！
vue使用ant design vue的collapse
早晚的博客
10-28 4675
在使用折叠面板的时候，应该是点击以后就会关闭一个面板，但是有的需要点击俩下，才可以展开，就是因为v-modal影响了这个 v-modal改成activeKey <a-collapse accordion @change="changePanel" activeKey="activeKey"> data () { return { ... activeKey: ['0'], } } changePanel(key) { // 组件自带的key相当于下标，就是循环出来每一个折叠面板，第
ant design vue使用collapse默认展开全部；自定义切换图标expandIcon
热门推荐
Crazy_GirlLL的博客
08-05 1万+
ant design vue使用collapse默认展开全部；自定义切换图标expandIcon
ant collapse组件 accordion失效
weixin_41438668的博客
04-21 538
记录一次 ant collapse组件 accordion失效。每个collapse每次只能打开一扇。
今日份的未解之谜：在代码中引入ant库中的Collapse折叠面板，在正式环境的代码中无法显示
HJY_Lilyth的博客
05-06 2706
<template> <div> <a-collapse v-model="activeKey"> <a-collapse-panel key="1" header="This is panel header 1"> <p>{{ text }}</p> </a-col...
Ant-Design-Vue的tabale组件嵌套应用
手心守贝
09-20 4982
原因 最近在使用ant design vue时，遇到一个简单的功能----表格嵌套 去查官方文档，发现他写的很简单，重点是每一组都是写的固定的假数据 那么问题来了，我的数据(二维数组)来了之后，table嵌套，怎么才能让他们渲染到不同的组里面呢 解决 那就查查资料，好好研究下文档吧 先看下官方的例子，内外层的table基本都是正常写的（行列数据都是指定的） 不同的是内层table使用了两个参数， ...
AntDesignVue一个基于AntDesign和Vue的企业级UI组件库
08-14
**AntDesignVue：基于Ant Design和Vue的企业级UI组件库** AntDesignVue是开发者们用于构建企业级前端界面的重要工具，它将阿里巴巴的Ant Design设计理念与Vue.js框架完美结合，提供了一系列高质量、易于使用的UI...
【Ant Design Vue的更新日志】
2301_81357485的博客
07-29 590
添加了全新的Calendar组件，用于日期和时间的选择和展示。添加了全新的Collapse组件，用于折叠面板的展示和操作。优化了Select组件的搜索逻辑，提升了搜索速度和准确度。对Button组件进行了优化，提升了组件的性能和渲染效果。对Form组件进行了优化，提升了表单的操作和校验功能。优化了Input组件的样式和交互方式，提升了用户体验。修复了多个已知的bug，提升了组件的稳定性和可靠性。修复了多个已知的bug，提升了组件的稳定性和可靠性。修复了多个已知的bug，提升了组件的稳定性和可靠性。
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（modal）出现蒙层遮挡弹框问题
MingT 明天你好！的博客
07-26 9923
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（dialog）出现蒙层遮挡弹框问题
使用Ant Design Vue的折叠面板组件时，阻止点击子控件却触发了折叠面板父控件的方法
sinat_34241861的博客
02-18 3124
可以监听子控件的click事件，并调用e.stopPropagation()阻止click事件继续传递，这样外层的折叠面板父控件就接收不到click事件了 代码： <template> <div> <a-collapse @change="handleCollapseChange($event, step, index)" draggable="true" @dragstart.native="dragStart($event, step, index)"&gt
mavon-editor样式失效，快速解决
欢迎来到iceseasyh的博客
02-25 2923
mavon-editor样式失效的解决办法，冲兄弟们
`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.
时光足迹
06-29 6414
问题描述：Warning: [ant-design-vue: Menu] inlineCollapsed not control Menu under Sider. Should set collapsed on Sider instead. 翻译：inlineCollapsed 不能控制 Sider 下的 Menu。应该在 Sider 上设置 collapsed 原因分析：menu放在sider中时，展开收缩控制应由sider处理。menu自己处理无效。 // 错误写法 <a-layout-side
Vue - 自定义antd中的Collapse组件标题和下拉图标
Zong_0915的博客
02-14 1842
- 自定义下拉图标 -- > < template #expandIcon > < a @click = "fold" > {isFold?"展开" : "收起" } } < DownOutlined v - if = "isFold" / > < UpOutlined v - else / > < / BaseButton > < / template > < a - collapse - panel key = "1" : header = "flightCollapseTitle" >
ant-design-vue 下拉框导致页面卡死
miniors的博客
11-14 346
打开一个弹窗，弹窗里有表格，有分页。一点击分页页码切换，就会导致整个浏览器崩溃。点击页码切换时弹窗的高度发生了变化，导致了页面重绘。预制好高度，避免页面重绘。
Vue - 自定义Collapse标题（含点击动作）如何与折叠事件独立开
Zong_0915的博客
02-14 3455
给我们自定义的标题内容区域添加一个点击阻止事件。但是我们单独点击这两个按钮，会同时触发。那如何把两者分开呢？中，自定义了标题，定义了一个。
ant design vue折叠面板自定义header
qq_41460077的博客
09-10 7219
ant design vue折叠面板自定义header 项目用到了ant design vue框架，看的时候一头雾水，很多地方用到slot类型，还没有例子！网上也没搜到，早知道用elementui，不过在这个没有前端的公司，我还是靠自己的智慧和经验试出来了，呼呼~~ 我们在自定义header的时候，文档写着： 代码： <a-collapse default-active-key="1" :bordered="false"> <a-collapse-p
ant-design-vue列点击事件（点击表格左侧，右侧数据发生改变）
Java&Develop的博客
02-19 2633
ant-design-vue列点击事件（点击表格左侧，右侧数据发生改变）
Vue页面antd select多选模式下（mode=“multiple“），点击框外下拉选项无法收起的问题完美解决
灿灿大王搭建的黄金屋
11-19 8067
<a-select class="w260" allowClear :maxTagTextLength="maxTagTextLength" mode="multiple" :open="isOpen" @focus="isOpenFocus" @ch...
vue2中使用@ant-design-vue/pro-layout菜单收起展开
最新发布
12-11
在Vue2中使用@ant-design-vue/pro-layout实现菜单的收起和展开，可以通过以下步骤进行配置： 1. **安装依赖**： 首先，确保你已经安装了`ant-design-vue`和`@ant-design-vue/pro-layout`。 ```bash npm install ant-design-vue @ant-design-vue/pro-layout --save ``` 2. **引入组件**： 在你的Vue项目中引入`pro-layout`组件。 ```javascript import Vue from 'vue'; import Antd from 'ant-design-vue'; import ProLayout from '@ant-design-vue/pro-layout'; Vue.use(Antd); ``` 3. **配置布局**： 在你的组件中使用`pro-layout`并配置菜单的收起和展开。 ```vue <template> <pro-layout :menus="menus" :collapsed="collapsed" @collapse="handleCollapse" > <template slot="header"> <div @click="toggleCollapsed">Toggle Menu</div> </template> <router-view /> </pro-layout> </template> <script> export default { data() { return { collapsed: false, menus: [ { path: '/', name: 'home', meta: { title: '首页' }, }, { path: '/about', name: 'about', meta: { title: '关于我们' }, }, ], }; }, methods: { toggleCollapsed() { this.collapsed = !this.collapsed; }, handleCollapse(collapsed) { this.collapsed = collapsed; }, }, }; </script> <style> /* 你的样式代码 */ </style> ``` 4. **配置路由**： 确保你的路由配置与菜单项对应。 ```javascript import Vue from 'vue'; import Router from 'vue-router'; import Home from '@/components/Home.vue'; import About from '@/components/About.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, ], }); ``` 通过以上步骤，你就可以在Vue2项目中使用@ant-design-vue/pro-layout实现菜单的收起和展开功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值