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

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

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

相关推荐
想用offer打牌几秒前
一站式了解责任链模式
java·后端·设计模式·责任链模式
专注VB编程开发20年3 分钟前
C# .NET多线程异步记录日声,队列LOG
java·开发语言·前端·数据库·c#
云墨-款哥的博客33 分钟前
创建 Vue 3.0 项目的两种方法对比:npm init vue@latest vs npm init vite@latest
前端·vue.js·npm
京东云开发者34 分钟前
由 Mybatis 源码畅谈软件设计(八):从根上理解 Mybatis 二级缓存
java
YU_admin36 分钟前
Java:常见算法
java·数据结构·算法
Linux技术支持工程师42 分钟前
docker镜像封装与发布微服务学习
学习·docker·微服务
转码的小石43 分钟前
Java面试复习指南:基础、多线程、JVM、Spring、算法精要
java·jvm·数据结构·算法·spring·面试·多线程
Quine_f1 小时前
模拟IC设计基础系列8-版图设计基础
学习·模拟ic设计
十六点五1 小时前
JVM(9)——详解Serial垃圾回收器
java·开发语言·jvm·后端
趣学习1 小时前
A028自动升降机+S71200+HMI+主电路图+外部接线图+流程图+IO分配表
毕业设计·课程设计·plc·西门子