Bootstrap-Table表格合并行

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('');
		}
	}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/1169.html