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

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

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

相关推荐
赵大仁8 分钟前
深入理解 Pinia:Vue 状态管理的革新与实践
前端·javascript·vue.js
guitarjoy37 分钟前
Compose原理 - 整体架构与主流程
java·开发语言
流年viv37 分钟前
数据分析学习笔记——A/B测试
笔记·学习·数据分析·统计原理
babicu1231 小时前
CSS Day07
java·前端·css
小鸡脚来咯1 小时前
spring IOC控制反转
java·后端·spring
前端大卫3 小时前
Vue3 里的 h 函数的运用场景!
前端·vue.js
怡人蝶梦3 小时前
Java后端技术栈问题排查实战:Spring Boot启动慢、Redis缓存击穿与Kafka消费堆积
java·jvm·redis·kafka·springboot·prometheus
瓯雅爱分享3 小时前
MES管理系统:Java+Vue,含源码与文档,实现生产过程实时监控、调度与优化,提升制造企业效能
java·mysql·vue·软件工程·源代码管理
真的想上岸啊4 小时前
学习STC51单片机22(芯片为STC89C52RCRC)
单片机·嵌入式硬件·学习