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

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

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

相关推荐
HerayChen1 天前
HbuilderX 内存溢出报错
java·大数据·linux
程序员小白条1 天前
0经验如何找实习?
java·开发语言·数据结构·数据库·链表
呱呱巨基1 天前
Linux 进程概念
linux·c++·笔记·学习
小马爱打代码1 天前
Spring AI:搭建自定义 MCP Server:获取 QQ 信息
java·人工智能·spring
郭涤生1 天前
QT 架构笔记
java·数据库·系统架构
韩立学长1 天前
基于Springboot流浪动物领养网站0kh2iyb4(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·spring boot·后端
daidaidaiyu1 天前
基于LangGraph开发复杂智能体学习一则
java·ai
yong15858553431 天前
2. Linux C++ muduo 库学习——原子变量操作头文件
linux·c++·学习
天问一1 天前
使用 Vue Router 进行路由定制和调用的示例
前端·javascript·vue.js
小小8程序员1 天前
STL 库(C++ Standard Template Library)全面介绍
java·开发语言·c++