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

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

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

相关推荐
数据知道18 分钟前
反序列化漏洞:Java、PHP、Python 三条线各讲透
java·网络·python·安全·网络安全·php
2601_9499506342 分钟前
Java 面试准备,用练题簿把“背过八股”变成“真正会答”
java·开发语言·面试·刷题·小程序推荐
吃好睡好便好1 小时前
说说高温对情绪的影响
学习·生活·情绪·高温
無限進步D1 小时前
Java 函数式编程(Lambda)
java·开发语言
rannn_1111 小时前
【力扣hot100】链表专题下|138、148、23、146
java·算法·leetcode·链表·开发
lv__pf1 小时前
Spring配置类解析 【TL spring 11】
java·前端·spring
for_ever_love__2 小时前
python基础语法学习: 文件操作
python·学习
zhougl9962 小时前
Java Spring Boot 爬虫技术全面介绍
java·spring boot·爬虫
m4Rk_2 小时前
【论文阅读】Agent 记忆机制(38):AMA——用多智能体协作动态选择记忆粒度
论文阅读·人工智能·学习
奥莱维2 小时前
【无标题】
java·前端·javascript