思想：layui表格合并单元格，layui并没有给出相应的解决办法；那么我们可以在前端使用js将相邻并相同的单元格合并；
1.页面代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>City3</title><link rel="stylesheet" href="/layui2.45/css/layui.css" /><script type="text/javascript" src="/layui2.45/layui.js"></script><style>.layui-table-page {text-align: center;}</style></head><body><table id="demo" lay-filter="test"></table><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div></script><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script><script>layui.use('table', function(){var table = layui.table;var $ = layui.jquery;//引入jquery的模块//第一个实例table.render({elem: '#demo',height: 512,url: '/getCity3' //数据接口,page: true //开启分页,toolbar: '#toolbarDemo',cols: [[ //表头{field: 'id', title: 'ID', sort: true, fixed: 'left'},{field: 'name', title: '名称'},{field: 'countryCode', title: '城市代码',sort: true},{field: 'district', title: 'district'},{field: 'population', title: 'population'},{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}]],done: function (res, curr, count) {merge(res);}});function merge(res) {console.log(res.data)var data = res.data;var mergeIndex = 0;//定位需要添加合并属性的行数var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数var columsName = ['id','name','countryCode'];//需要合并的列名称var columsIndex = [0,1,2];//需要合并的列索引值for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并mark += 1;tdPreArr.each(function () {//相同列的第一列增加rowspan属性$(this).attr("rowspan", mark);});tdCurArr.each(function () {//当前行隐藏$(this).css("display", "none");});}else {mergeIndex = i;mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算}}mergeIndex = 0;mark = 1;}}});</script></body></html>
2.页面效果：
有啥不懂得小伙伴们加群交流啦：852665736；本群致力于一同进步的小伙伴们，大家一起交流探讨，在陌生的城市感受温暖；
无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注微信公众号：gh_817962068649
