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

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

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

相关推荐
_dindong8 分钟前
动规:回文串问题
笔记·学习·算法·leetcode·动态规划·力扣
Zwb29979224 分钟前
Day 30 - 错误、异常与 JSON 数据 - Python学习笔记
笔记·python·学习·json
wangwangmoon_light36 分钟前
0.0 编码基础模板
java·数据结构·算法
Terio_my1 小时前
Spring Boot 热部署配置与自定义排除项
java·spring boot·后端
不太可爱的叶某人1 小时前
【学习笔记】kafka权威指南——第7章 构建数据管道(7-10章只做了解)
笔记·学习·kafka
Broken Arrows2 小时前
k8s学习(二)——kubernetes整体架构及组件解析
学习·架构·kubernetes
小年糕是糕手2 小时前
【数据结构】算法复杂度
c语言·开发语言·数据结构·学习·算法·leetcode·排序算法
JAVA学习通2 小时前
微服务项目->在线oj系统(Java-Spring)--C端用户(超详细)
java·开发语言·spring
计算机毕业设计小帅2 小时前
【2026计算机毕业设计】基于jsp的毕业论文管理系统
java·开发语言·毕业设计·课程设计