Bootstrap-Table表格合并行
Bootstrap-Table表格合并行可以实现，但那是错误的方法，你要的效果可以实现，但是你的思路有问题，我最近也在项目上遇到这个问题，由于之前做VUE分离项目比较多，现在调到这里修修改改的，对Bo...
Bootstrap-Table表格合并行可以实现，但那是错误的方法，你要的效果可以实现，但是你的思路有问题，我最近也在项目上遇到这个问题，由于之前做VUE分离项目比较多，现在调到这里修修改改的，对Bootstrap-Table这个东西也不太熟悉，所以开始是想以合并行来处理，但想了下这是错误的，因为如果有分页，当前查了10条，此时如果两天合成一条是有问题的，10/2等于5条对不对，下面先看实现的效果。
可以看到图片上的表格后四个字段内都是上下两行，其实很简单，不要想着如何合并行，想一想如何在表格内插入标签，比如div,span等。
要知道Bootstrap-Table表格内是支持放html标签的，下面看一段代码，意思是我在里面嵌入了两个div与一个span标签，两个div代表上下的格，而span代替两个div之间的边框，看懂了没。重点是formatter，你们可以console.log它接收的东西看一看。
{
field: 'CHANGEBATTERYNAME',
title: '换上电池名称',
valign: "middle",
align: "center",
formatter: function(value, row, index) {
var actions = [];
actions.push('<div style="display:block;height: 30px;">' + value.left + '</div>');
actions.push('<span style="display:block;height:1px;background:#c9c7c7;width:100%"></span>');
actions.push('<div style="display:block;height: 30px;">' + value.right + '</div>');
return actions.join('');
}
}
- 发表于 2020-10-16 13:32
- 阅读 ( 800 )
- 分类：web前端开发
