Bootstrap-Table表格合并行

Bootstrap-Table表格合并行可以实现,但那是错误的方法,你要的效果可以实现,但是你的思路有问题,我最近也在项目上遇到这个问题,由于之前做VUE分离项目比较多,现在调到这里修修改改的,对Bo...

Bootstrap-Table表格合并行可以实现,但那是错误的方法,你要的效果可以实现,但是你的思路有问题,我最近也在项目上遇到这个问题,由于之前做VUE分离项目比较多,现在调到这里修修改改的,对Bootstrap-Table这个东西也不太熟悉,所以开始是想以合并行来处理,但想了下这是错误的,因为如果有分页,当前查了10条,此时如果两天合成一条是有问题的,10/2等于5条对不对,下面先看实现的效果。

attachments-2020-10-Zs1TqMjw5f892dffa931b.png

可以看到图片上的表格后四个字段内都是上下两行,其实很简单,不要想着如何合并行,想一想如何在表格内插入标签,比如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('');
		}
	}

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

578 篇文章

作家榜 »

  1. admin 578 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. quanyi 0 文章