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

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

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

相关推荐
牛奶5 小时前
Vue 基础理论 & API 使用
前端·vue.js·面试
牛奶5 小时前
Vue 底层原理 & 新特性
前端·vue.js·面试
pe7er5 小时前
状态提升:前端开发中的状态管理的设计思想
前端·vue.js·react.js
程序员清风13 小时前
程序员兼职必看:靠谱软件外包平台挑选指南与避坑清单!
java·后端·面试
皮皮林55114 小时前
利用闲置 Mac 从零部署 OpenClaw 教程 !
java
_AaronWong16 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
wuhen_n17 小时前
双端 Diff 算法详解
前端·javascript·vue.js
爱勇宝18 小时前
别再混用了!import.meta.env 与 process.env 的本质差异一次讲透
前端·javascript·vue.js
洋洋技术笔记19 小时前
Spring Boot配置管理最佳实践
spring boot
华仔啊19 小时前
挖到了 1 个 Java 小特性:var,用完就回不去了
java·后端