iview 如何设置sider宽度

iview layout组件中,sider设置了默认宽度和最大宽度,在css样式文件中修改无效,原因是iview默认样式设置在了element.style中,只能通过行内样式修改

样式如下:


image.png

image.png

修改方式:

1.官方文档中写明修改宽度通过传参数width实现


image.png

详见iview组件 layout部分
布局 Layout - iView (iviewui.com)

2.使用行内样式覆盖源样式

复制代码
<sider style="width: 300px;min-width: 300px;max-width: 300px;flex: 0 0 300px;">

补充:

神奇的技巧

如果想让sider的宽度自适应父元素,将width的值设置为空即可

代码:

复制代码
 <sider :width="''">

sider的class


image.png

原创
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
yaoxin5211231 小时前
434. Java 日期时间 API - Period 基于日期的时间段
java·开发语言·python
何极光2 小时前
IDEA集成Maven
java·maven·intellij-idea
岁月宁静2 小时前
RAG 文档摄入全链路,从原理到生产落地
vue.js·人工智能·python
程序员二叉2 小时前
【JUC】ThreadLocal底层原理|内存泄漏|弱引用|跨线程传递方案
java·开发语言·面试·职场和发展·juc
程序员二叉2 小时前
【JUC】线程池全套深度详解|参数|流程|拒绝策略|调优|异常处理
java·开发语言·jvm·算法·面试·juc
老马识途2.02 小时前
在AI的帮助下理解spring的启动过程
java·前端·spring
青山木2 小时前
Hot 100 --- 轮转数组
java·数据结构·算法
Qt程序员3 小时前
掌握 Linux 内核调度:从原理到实现(进程篇)
java·开发语言
code bean3 小时前
【LangChain】检索器完全指南:从向量检索到生产级 RAG 架构
java·开发语言·微服务
大白菜和MySQL3 小时前
java应用排查高线程
java·python