多种table列表合并列内容相同的单元格方法（原生table、layui-table、el-table

多种table列表合并列内容相同的单元格方法

• 原生table

html:
        <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] += 1
              spanOneArr.push(0)
            } else {
              spanOneArr.push(1)
              concatOne = index
            };
            if (item.ordersSn === arr[index - 1].ordersSn) { // 第二列需合并相同内容的判断条件
              spanTwoArr[concatTwo] += 1
              spanTwoArr.push(0)
            } else {
              spanTwoArr.push(1)
              concatTwo = index
            };
            if (item.serviceSn === arr[index - 1].serviceSn) { // 第三列需合并相同内容的判断条件
              spanThreeArr[concatThree] += 1
              spanThreeArr.push(0)
            } else {
              spanThreeArr.push(1)
              concatThree = index
            };
            if (item.institutesName === arr[index - 1].institutesName) { // 第四列需合并相同内容的判断条件
              spanFourArr[concatFour] += 1
              spanFourArr.push(0)
            } else {
              spanFourArr.push(1)
              concatFour = index
            };
            if (item.addressName === arr[index - 1].addressName) { // 第14列需合并相同内容的判断条件
              spanThirteenArr[concatThirteen] += 1
              spanThirteenArr.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 : 0
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 1) {  // 判断第二列
          const _row = (this.flitterData(this.detail.goodsList).two)[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 2) {  // 判断第三列
          const _row = (this.flitterData(this.detail.goodsList).three)[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 3) {  // 判断第四列
          const _row = (this.flitterData(this.detail.goodsList).four)[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 12) {  // 判断第13列
          const _row = (this.flitterData(this.detail.goodsList).thirteen)[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      },