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

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

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

相关推荐
猿究院_夏燊30 分钟前
MySQL 的四种隔离级别
java·数据库·mysql
码流子1 小时前
移动收费怎么做?手持终端+App+收费中心的架构实践
java·开发语言·架构
霸道流氓气质1 小时前
AI 流式对话与实时聊天平台:SSE 解码竞态、有状态会话隔离与背压取消的 Vue3 + Spring AI 生产级实战
java·人工智能·spring
云创智城-yuncitys1 小时前
YunParking 4.0:JDK 17 与 Spring Boot 3.2 的停车云升级
java·开发语言·spring boot
文丑颜不良啊1 小时前
LeetCode1661~1680题目解析
java·leetcode
子非鱼@Itfuture1 小时前
关于前后端联调中登录状态/登录信息失效?
java·前端
郭小李2 小时前
openFeign入门
java·开发语言·前端
wljt2 小时前
公司二-面试题
java·开发语言·mybatis
AI备案指南-满满2 小时前
算法备案审核不通过,一般是什么原因?
java·人工智能·算法·大模型备案·算法备案·大模型登记
秋天的怀念_David2 小时前
算法一千零一夜 · 第二十三夜 电力民生写成的曲线
java·程序人生·算法