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

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

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

相关推荐
达子666几秒前
第10章_HarmonyOs开发图解 用JS开发UI
vue.js
520拼好饭被践踏7 分钟前
JAVA+Agent学习day22
java·开发语言·后端·学习
懿路向前13 分钟前
【HarmonyOS学习笔记】2026-07-24 | textProcessing 实体识别与踩坑实录
笔记·学习·边缘计算·harmonyos
菩提树下的打坐16 分钟前
性能测试进阶:从 JMeter 基线到 SLO 驱动的压测体系
学习·jmeter
笨蛋不要掉眼泪18 分钟前
Java虚拟机:堆的参数配置
java·开发语言·jvm
霸道流氓气质20 分钟前
SpringBoot中使用JasperReports 报表引擎 — 介绍、原理与使用实践
java·spring boot·后端
花生了什么事o26 分钟前
DDD 分层架构:六层分层架构
java·架构·ddd
Y38153266228 分钟前
3 种 SERP 数据处理方案对比:流式 / 批处理 / 缓存
java·spring·缓存
奶糖 肥晨29 分钟前
想return数据 返回的确是函数问题处理
vue.js
Albart57537 分钟前
2026年Python入门路线图:从零到实战的30天逐日详解(三)
学习·flask·#python30 天入门·python 实战教程·pytest 单元测试·python 虚拟环境·logging 日志