多种table列表合并列内容相同的单元格方法
原生tablehtml:<table class="tablelist" id="tablelist">js:jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件return this.each(function(){var that;$('tr', this).each(function(row) {$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {if (that!=null && $(this).html() == $(that).html()) {rowspan = $(that).attr("rowSpan");if (rowspan == undefined) {$(that).attr("rowSpan",1);rowspan = $(that).attr("rowSpan"); }rowspan = Number(rowspan)+1;$(that).attr("rowSpan",rowspan);$(this).hide();} else {that = this;}});});});}$("#tablelist").rowspan(0);//传入的参数是对应的列数从0开始 第一列合并相同$("#tablelist").rowspan(1);//传入的参数是对应的列数从0开始 第二列合并相同$("#tablelist").rowspan(2);//传入的参数是对应的列数从0开始 第二列合并相同$("#tablelist").rowspan(12);//传入的参数是对应的列数从0开始 第二列合并相同
layui-table
html:<table class="layui-hide" id="dataList" lay-filter="dataList"></table>js:,done: function(res, curr, count){merge(res);//调用}/*** 合并单元格（列）* @param res 表格数据* @param curr 当前页* @param count 总数*/function merge(res) {var data = res.data;var mergeIndex = 0;//定位需要添加合并属性的行数var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数var columsName = ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'];//需要合并的列名称var columsIndex = [1,2, 3, 4, 14, 15, 16,17, 18, 19, 20];//需要合并的列索引值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;}}
el-table
html:<el-table class="tablelist" :border="true" :data="detail.goodsList" :span-method="objectSpanMethod">js:// 合并同一列相同的内容flitterData (arr) {let spanOneArr = [],spanTwoArr = [],spanThreeArr = [],spanFourArr = [],spanThirteenArr = [],concatOne = 0,concatTwo = 0,concatThree = 0,concatFour = 0,concatThirteen = 0;arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1);spanTwoArr.push(1);spanThreeArr.push(1);spanFourArr.push(1);spanThirteenArr.push(1);} else {if (item.sn === arr[index - 1].sn) { // 第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1spanOneArr.push(0)} else {spanOneArr.push(1)concatOne = index};if (item.ordersSn === arr[index - 1].ordersSn) { // 第二列需合并相同内容的判断条件spanTwoArr[concatTwo] += 1spanTwoArr.push(0)} else {spanTwoArr.push(1)concatTwo = index};if (item.serviceSn === arr[index - 1].serviceSn) { // 第三列需合并相同内容的判断条件spanThreeArr[concatThree] += 1spanThreeArr.push(0)} else {spanThreeArr.push(1)concatThree = index};if (item.institutesName === arr[index - 1].institutesName) { // 第四列需合并相同内容的判断条件spanFourArr[concatFour] += 1spanFourArr.push(0)} else {spanFourArr.push(1)concatFour = index};if (item.addressName === arr[index - 1].addressName) { // 第14列需合并相同内容的判断条件spanThirteenArr[concatThirteen] += 1spanThirteenArr.push(0)} else {spanThirteenArr.push(1)concatThirteen = index};}});return {one: spanOneArr,two: spanTwoArr,three: spanThreeArr,four: spanFourArr,thirteen: spanThirteenArr}},objectSpanMethod ({ row, column, rowIndex, columnIndex }) {console.log({ row, column, rowIndex, columnIndex });if (columnIndex === 0) { // 判断第一列const _row = (this.flitterData(this.detail.goodsList).one)[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col};}if (columnIndex === 1) { // 判断第二列const _row = (this.flitterData(this.detail.goodsList).two)[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col};}if (columnIndex === 2) { // 判断第三列const _row = (this.flitterData(this.detail.goodsList).three)[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col};}if (columnIndex === 3) { // 判断第四列const _row = (this.flitterData(this.detail.goodsList).four)[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col};}if (columnIndex === 12) { // 判断第13列const _row = (this.flitterData(this.detail.goodsList).thirteen)[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col};}},
