当前位置: 首页 > news >正文

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

原创



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

相关文章:

  • 论文阅读:2024 ACM SIGSAC Membership inference attacks against in-context learning
  • 多模态大语言模型arxiv论文略读(五十一)
  • 自主采集高质量三维重建数据集指南:面向3DGS与NeRF的图像与视频拍摄技巧【2025最新版!!】
  • 活动回顾 | 「招商大脑 · 运营引擎」解码大数据招商与智慧园区运营新模式
  • Qt -DFS可视化
  • 91.首次使用Maui的体验与建议 C#例子 Maui例子
  • 系统思考:局部最优与全局失衡
  • windows远程服务器数据库的搭建和远程访问(Mysql忘记密码通过Navicat连接记录解密密码)
  • 量化交易之数学与统计学基础2.3——线性代数与矩阵运算 | 线性方程组
  • 加速LLM大模型推理,KV缓存技术详解与PyTorch实现
  • 车辆检测新突破:VFM-Det 如何用大模型提升识别精度
  • Spring 框架中的常见注解讲解
  • Chromium 134 编译指南 - Android 篇:配置depot_tools(四)
  • 工业控制「混合架构」PK大战 —— 神经网络 + MPC vs 模糊 PID+MPC 的场景选型与实战指南
  • vscode 个性化
  • 深入探讨互联网大厂Java核心技术与架构设计
  • C++继承(上)
  • conda管理python环境
  • Walrus 与 Pudgy Penguins 达成合作,为 Web3 头部 IP 引入去中心化存储
  • 字节暑期实习-网络运维工程师面经
  • 五一去哪玩?“时代交响”音乐会解锁艺术假期
  • 国际油价重挫!美股道指连跌三月,啥情况?
  • 今年五一假期出游人群规模预计比去年提升8%,哪里最热门?
  • 解放日报:抢占科技制高点,赋能新质生产力
  • 证监会:坚决拥护党中央对王建军进行纪律审查和监察调查的决定
  • 刘国中:毫不松懈巩固拓展脱贫攻坚成果,全力以赴抓好农业防灾减灾工作