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

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

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

相关推荐
南方的狮子先生11 分钟前
【数据结构】(C++数据结构)查找算法与排序算法详解
数据结构·c++·学习·算法·排序算法·1024程序员节
Lisonseekpan25 分钟前
为什么要避免使用 `SELECT *`?
java·数据库·后端·sql·mysql·oracle
一只小透明啊啊啊啊29 分钟前
Java的中间件
java·开发语言·中间件
Wilson Chen30 分钟前
深入理解 MySQL 事务与锁机制:从 ACID 到 Next-Key Lock 的实证之旅
java·数据库·mysql
学编程就要猛44 分钟前
数据结构初阶:Java中的ArrayList
java·开发语言·数据结构
JH30731 小时前
10分钟理解泛型的通配符(extends, super, ?)
java·开发语言·windows
Crystal3281 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476681 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
在等晚安么1 小时前
力扣面试经典150题打卡
java·数据结构·算法·leetcode·面试·贪心算法
Fency咖啡1 小时前
Spring进阶 - Spring事务理论+实战,一文吃透事务
java·数据库·spring