添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
  • 若依(ruoyi): v4.3
  • mysql:5.5.40
  • BootstrapTable

若依(ruoyi)的前端基于Bootstrap的轻量级表格插件 BootstrapTable 实现的表格。因此使用BootstrapTable修改列宽的方法即可。

经过网上检索,BootstrapTable提供的width属性定制列宽无效。需要使用其它方法。

目前找到了2个可行的方法:

  1. 修改样式 .th-inner 的宽度。
  2. 在值的外层套上div,在div上指定宽度。

修改样式 .th-inner 的宽度

.W120 .th-inner {
    width:120px !important;
.W80 .th-inner {
    width:80px !important;
.W60 .th-inner {
    width:60px !important;
.W150 .th-inner {
    width:150px !important;
  1. 配置 columns 时,给列添加class
class: 'W120', field: 'buyTime', title: '购买时间'

在值的外层套上div,在div上指定宽度

配置 columns 时,使用formatter格式化值的内容。

field: 'buyTime', title: '购买时间', formatter: function (value, row, index) { return '<div style="width:400px;">'+value+'</div>';

注意:用span套不行,用div套可以

https://blog.csdn.net/u013194063/article/details/79671773
https://www.cnblogs.com/suitao/p/8306349.html
https://blog.csdn.net/a854517900/article/details/83062274

使用若依框架搭建的管理后台,因为table是封装好的。表格宽度是自适应的。就想着在网上找一下属性,看能不能设置一下每一数据的宽度。输入的稍微长一点就会这样。 bootstrap table是一个很好的集成展示表格的工具,但是集成的东西要设置个性化界面样式比较麻烦。如果一个个都用浏览器调试获取样式并做修改未免太麻烦了。以下是比较常用的bootstrap table表格的相关样式更改。 若依(ruoyi)将 Bootstrap-Table 进行了封装。与原生的 Bootstrap-Table 使用有些区别,但区别不大。 若依(ruoyi)对 Bootstrap-Table 的封装 若依(ruoyi)封装 Bootstrap-Table 的代码在ruoyi-ui.js中。 若依(ruoyi)封装 Bootstrap-Table 的对象为$.table。通过$.table操作 Bootstrap-Table 得到了简化,且支持单页面中包含多个 Bootstrap- | | |-- org | | |-- proj | | |-- controller | | |-- domain | | |-- mapper | | |-- 若依(ruoyi): v4.3 360极速浏览器 12.0.1550.0 (正式版本) (32 位) 操作系统 Windows 10 OS Version 2004 (Build 19041.572) JavaScript V8 7.8.279.23 jQuery v2.1.4 表格图片预览功能 若依(ruoyi)自带了一个表格图片预览功能。该功能可以在示例演示>表格>表格图片预览功能中找到。 表格图片预览功能图片超宽问题 表格图片预览功能遇到超宽图片(比如屏幕宽度1024px,图片 在vue页面增加/修改以下3部分的设置,可以使若依vue页面表支持显示的配置,并可以根据配置的权限来限制具有该操作权限的人使用。 1、在 export default 中设置导出信息 在export default的data中设置信息columns,其中key表示的唯一索引,label表示在配置窗口中的显示名称,visible表示默认是否显示该,true表示显示,false为不显示。 <script> import { listAuthlog } from "@/api/c. RuoYi若依管理系统是一个基于SpringBoot的权限管理系统,代码易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用。 RuoYi若依管理系统功能: 1、用户管理:用户是系统操作者,该功能主要完成系统用户配置。 2、部门管理:配置系统组织机构(公司、部门、小组),树结构展现支持权限。 3、岗位管理:配置系统用户所属担任职务。 4、菜单管理:配置系统菜单,操作权限,按钮权限标识等。 5、角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。 6、字典管理:对系统中经常使用的一些较为固定的数据进行维护。 7、参数管理:对系统动态配置常用参数。 8、通知公告:系统通知公告信息发布维护。 9、操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。 10、登录日志:系统登录日志记录查询包含登录异常。 11、在线用户:当前系统中活跃用户状态监控。 12、定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。 13、代码生成:前后端代码的生成(java、html、xml、sql)支持CRUD下载 。 14、系统接口:根据业务代码自动生成相关的api接口文档。 15、服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。 16、在线构建器:拖动表单元素生成相应的HTML代码。 17、连接池监视:监视当前系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。 RuoYi若依管理系统 更新日志: v4.6.1 新增IE浏览器版本过低提示页面 新增详细信息tab页签方式 新增解锁屏幕打开上次页签 数据监控默认账户密码防止越权访问 新增表格示例(导出选择) 个人信息添加手机&邮箱重复验证 个人中心刷新后样式问题 操作日志返回参数添加非空验证 velocity剔除commons-collections版本,防止3.2.1版本的反序化漏洞 子表模板默认日期格式化 代码生成预览语言根据后缀名高亮显示 代码生成主子表相同字段导致数据问题 升级SpringBoot到最新版本2.2.13 升级shiro到最新版1.7.1 阻止身份认证绕过漏洞 升级bootstrapTable到最新版本v1.18.2 升级bootstrapTable相关组件到最新版本v1.18.2 升级fastjson到最新版1.2.75 升级druid到最新版本v1.2.4 升级oshi到最新版本v5.6.0 修改ip字段长度防止ipv6地址长度不够 搜索建议示例选择后隐藏表 主子表示例增加初始化数据 优化Excel导入增加空行判断 修复横向菜单无法打开页签问题 修复导入数据为负浮点数时,导入结果会丢失精度问题 优化更多操作按钮左侧移入内容闪现消失情况 修复主子表提交中隐藏后出现偏移问题 单据打印网页时通过hidden-print隐藏元素 表格销毁清除记住选择数据 增加表格动态示例 代码生成选择主子表关联元素必填 tree根据Id和Name选中指定节点增加空判断 其他细节优化 WEB应用的页面,表格的表现形式是常常遇到的,在数有限的前提下,如何将各中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来谈一谈我对这类问题的解决与看法。将所有设置为固定宽度,显然是不能满足此类要求的,但是若把全部的都设置为百分比,恐怕在某些尺寸,或分辨率下,会变得很难看。在Bigtree看来,比较习惯于用如下的方式来处理——在表格数不是很多的前提下——将大部分...