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

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

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

相关推荐
吃货界的硬件攻城狮3 分钟前
【STM32 学习笔记】GPIO输入与输出
笔记·stm32·学习
钢铁男儿12 分钟前
C# 方法(局部函数和参数)
java·数据库·c#
遇见你的雩风19 分钟前
Java---Object和内部类
java·开发语言
Chef_Chen20 分钟前
从0开始学习大模型--Day01--大模型是什么
学习
缘友一世31 分钟前
深度学习系统学习系列【1】之基本知识
人工智能·深度学习·学习
逊嘘37 分钟前
【纪念我的365天】我的创作纪念日
java
vibag39 分钟前
启发式算法-禁忌搜索算法
java·算法·启发式算法·禁忌搜索
Echo``1 小时前
19:常见的Halcon数据格式
java·linux·图像处理·人工智能·windows·机器学习·视觉检测
Rubypyrrha1 小时前
Spring框架的设计目标,设计理念,和核心是什么 ?
java·spring
佩奇的技术笔记1 小时前
Java学习手册:Spring 多数据源配置与管理
java·spring