RUOYI 框架教程 3 | 操作小技巧,快看看你掌握了多少!
![](https://static001.geekbang.org/infoq/ea/ea3ae6f3538d56f1248d9cb4613ecbfe.png)
“ 若依教程独家分享!点赞+关注,一起从「蒟蒻」变成「大佬」~”
1 表格操作技巧,你 get 了多少?
本期内容
1 常规表格加栏栅边框?
2 内容自适应内容长度?
3 左侧锁定或冻列?
4 内容列调色?
5 数据自动排序依照某个字段?
6 修改单元格内容的样式?
2 常规表格加栅栏边框,应该怎么控制么?
将正常生成的表格样式层的 div 样式由 tablestriped 调整成 tablebordered 即 可!
![](https://static001.geekbang.org/infoq/13/137393c497e98ed90b4c3e765850ed5a.png)
复制代码
3 内容自适应长度,应该怎么控制么?
表格加 table 样式,text-nowrap 控制内容不换行,表格外层加上<div class="table-responsive">。
表格里面的 thead 和 tbody 不能省略,否则表格样式不会被使用。
复制代码
4 表格左侧锁定列,应该怎么控制么?
在原代码中加入 fixedColumns 、fixedNumber 两个属性参数
复制代码
说明:
![](https://static001.geekbang.org/infoq/8e/8ee3d4121f375a00a545f71b99e04d80.png)
5 表格列调色,应该怎么控制么?
需要在原代码中加入样式:
复制代码
6 表格数据排序,应该怎么控制么?
在需要排序的字段下添加 sortable:true
复制代码
7 修改单元格样式,应该怎么控制么?
如单元格内容是超链接,其他样式同理
复制代码
如果想围观票圈,可以扫这个二维码加我微信~
![](https://static001.geekbang.org/infoq/dc/dcc4a9492a1016187e1e1a0f5ce26f49.webp?x-oss-process=image/resize,p_80/format,jpg)
![](https://static001.geekbang.org/infoq/79/79b2f7050d288e0442458e4d5ab16a5d.png)
版权声明: 本文为 InfoQ 作者【Java_若依框架教程】的原创文章。
原文链接:【http://xie.infoq.cn/article/1457280223ce8250a2e3a38c8】。文章转载请联系作者。
评论