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

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

原创



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

http://www.xdnf.cn/news/3145.html

相关文章:

  • 论文阅读:2024 arxiv Jailbreaking Black Box Large Language Models in Twenty Queries
  • 17、商品管理:魔药商店运营——React 19 CRUD实现
  • 【Unity C#从零到精通】项目深化:构建核心游戏循环、UI与动态敌人系统
  • ASP.NET MVC后端控制器用模型 接收前端ajax数据为空
  • Copilot总结Word长文档功能更新升级
  • Elasticsearch--自带“搜索引擎“的数据库
  • uniapp 实现低功耗蓝牙连接并读写数据实战指南
  • 2025年“深圳杯”数学建模挑战赛C题-分布式能源接入配电网的风险分析
  • a-upload组件实现文件的上传——.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt
  • Electron Forge【实战】带图片的 AI 聊天
  • 罗技K580蓝牙键盘连接mac pro
  • C# 面向对象实例演示
  • 开源项目实战学习之YOLO11:ultralytics-cfg-models-fastsam(九)
  • Mysql主从复制到分库分表再到读写分离
  • 详解操作系统是如何管理计算机软硬件资源的,以及Linux中进程状态的观察与解释
  • 串口驱动打印下载官网
  • AimRT 从零到一:官方示例精讲 —— 二、HelloWorld示例.md
  • OpenCV-Python (官方)中文教程(部分一)_Day18
  • UVA1537 Picnic Planning
  • transform-实现Encoder 编码器模块
  • NFS-网络文件系统
  • 【codeforces 2086d】背包+组合数学
  • Java之BigDecimal
  • 杭电oj(1015、1016、1072、1075)题解
  • 在线文章系统自动化测试报告
  • MIT6.S081-lab7前置
  • 免费超好用的电脑操控局域网内的手机(多台,无线)
  • Leetcode 3530. Maximum Profit from Valid Topological Order in DAG
  • CSS:编写位置分类及优先级
  • 从Markdown到专业文档:如何用Python打造高效格式转换工具