欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【若依(ruoyi)】table定制列宽

程序员文章站 2022-03-02 08:24:35
前言若依(ruoyi): v4.3mysql:5.5.40BootstrapTable分析若依(ruoyi)的前端基于Bootstrap的轻量级表格插件 BootstrapTable 实现的表格。因此使用BootstrapTable修改列宽的方法即可。经过网上检索,BootstrapTable提供的width属性定制列宽无效。需要使用其它方法。目前找到了2个可行的方法:修改样式 .th-inner 的宽度。在值的外层套上div,在div上指定宽度。修改样式 .th-inner...

前言

  • 若依(ruoyi): v4.3
  • mysql:5.5.40
  • BootstrapTable

分析

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

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

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

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

修改样式 .th-inner 的宽度

  1. 定义样式
.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

本文地址:https://blog.csdn.net/sayyy/article/details/107483936

相关标签: java脚手架