el-table合并单元格 和 合计行

el-table合并单元格效果：

加这个方法： :span-method="objectSpanMethod"

<el-table
	:data="tableData"
	id="gy-table" //监听用，修改合计行的字体
	:span-method="objectSpanMethod"
	height="780"
	:stripe="true"
	show-summary
	:summary-method="getSummaries"
	border
	stripe
	highlight-current-row
	style="width: 100%;max-height:780px;margin-bottom: 20px;margin-top: 10px;overflow: auto;cursor:pointer">
	<el-table-column
	  type="index"
	  label="序号"
	  width="58"
	  align="center"
	></el-table-column>
	
	<el-table-column prop="name" label="姓名">
	  <template slot-scope="scope">
	    <span>${ scope.row.name }</span>
	  </template>
	</el-table-column>
	<el-table-column prop="dep_name" label="部门">
	  <template slot-scope="scope">
	    <span v-if="scope.row.dep_id == '9999999999999'" style="font-weight: bold">${ scope.row.dep_name }</span>
	    <span v-else>${ scope.row.dep_name }</span>
	  </template>
	</el-table-column>
	<el-table-column prop="properties" label="样品性质">
	  <template slot-scope="scope">
	    <span v-if="scope.row.dep_id == '9999999999999'" style="font-weight: bold">${ scope.row.properties }</span>
	    <span v-else>${ scope.row.properties }</span>
	  </template>
	</el-table-column>
	
	<el-table-column prop="qa_qty" label="工艺分析数量">
	  <template slot-scope="scope">
	    <span v-if="scope.row.dep_id == '9999999999999' && scope.row.qa_qty != 0" style="font-weight: bold">${ scope.row.qa_qty }</span>
	    <span v-else-if="scope.row.qa_qty != 0">${ scope.row.qa_qty}</span>
	  </template>
	</el-table-column>
	<el-table-column prop="review_qty" label="评审数量">
	  <template slot-scope="scope">
	    <span v-if="scope.row.dep_id == '9999999999999' && scope.row.review_qty != 0" style="font-weight: bold">${ scope.row.review_qty }</span>
	    <span v-else-if="scope.row.review_qty != 0">${ scope.row.review_qty}</span>
	  </template>
	</el-table-column>
	
</el-table>

var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],

    data() {
      return {
		//姓名
        spanArr_name: [],
        posName: null,
        //部门
        spanArr_dep_name: [],
        posdepName: null,
      };
    },
methods: {
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        let self = this;
        //姓名列
        //columnIndex 给第二列做单元格合并。0是第一列，1是第二列，2是第三列。
        if (columnIndex === 1) {
          const rowCell = self.spanArr_name[rowIndex];
          if (rowCell > 0) {
            const colCell = 1;
            return {
              rowspan: rowCell,
              colspan: colCell,
            };
          } else {
            // 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
            // 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }

        //部门列
        // columnIndex 给第二列做单元格合并。0是第一列，1是第二列，2是第三列。
        if (columnIndex === 2) {
          console.log("单元格数组，若下一项为0，则代表合并上一项", self.spanArr_dep_name);
          const rowCell_dep = self.spanArr_dep_name[rowIndex];
          if (rowCell_dep > 0) {
            const colCell_dep = 1;
            console.log(`动态竖向合并单元格, 第${colCell_dep}列，竖向合并${rowCell_dep}个单元格 `);
            return {
              rowspan: rowCell_dep,
              colspan: colCell_dep,
            };
          } else {
            // 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
            // 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
        
        //继续列，就继续if() else 你妈的
      },

      //获取合并配置明细
      getSpanArr(data) {
        console.log(data)
        let self = this;
        self.spanArr_name = [];
        self.posName = 0; // 初始计数为0

        self.spanArr_dep_name = [];
        self.posdepName = 0; // 初始计数为0

        // 循环遍历表体数据
        for (let i = 0; i < data.length; i++) {
          if (i == 0) {
            // 先设置第一项
            self.spanArr_name.push(1); // 初为1，若下一项和此项相同，就往spanArr_name数组中追加0
            self.posName = 0; // 初始计数为0

            self.spanArr_dep_name.push(1); // 初为1，若下一项和此项相同，就往spanArr_dep_name数组中追加0
            self.posdepName = 0; // 初始计数为0
          }
          else {
            // 判断当前项与上项的设备类别是否相同，因为是合并这一列的单元格
            //姓名列
            if (data[i].name == data[i - 1].name) {
              // 如果相等
              self.spanArr_name[self.posName] += 1; // 增加计数
              self.spanArr_name.push(0); // 相等就往spanArrp_name数组中追加0
            }
            else {
              self.spanArr_name.push(1); // 不等就往spanArr_name数组中追加1
              self.posName = i; // 将索引赋值为计数
              console.log("索引", i, self.posName);
            }
            
			//部门列
            if(data[i].dep_name == data[i - 1].dep_name){
              // 如果相等
              self.spanArr_dep_name[self.posdepName] += 1; // 增加计数
              self.spanArr_dep_name.push(0); // 相等就往spanArr_dep_name数组中追加0
              console.log("索引", i, self.posdepName);
            }
            else {
              self.spanArr_dep_name.push(1); // 不等就往spanArr_dep_name数组中追加1
              self.posdepName = i; // 将索引赋值为计数
              console.log("索引", i, self.posdepName);
            }
             //继续列，就继续if() else, 但是要重新声明 数据列添加的新数组 你妈的
          }
        }

      },

	  //合计行
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总 计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          //指定列名是qa_qty 或 review_qty的列，其他不统计
          if (!values.every(value => isNaN(value)) && (column.property === 'qa_qty' || column.property ==='review_qty')) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev/2;
              }
            }, 0);
            let i_sum = sums[index]/2;
            sums[index] = i_sum;
          } else {
            sums[index] = null;
          }
        });

        return sums;
      }
      
    },
    //修改合计行的 字体 样式 
    watch: {
      tableData: {
        async handler() {
          await this.$nextTick(()=>{
            const tds = document.querySelectorAll('#gy-table .el-table__footer-wrapper tr>td');
            // tds[1].style.textAlign = 'center';
            tds[1].style.fontWeight = 'bold';
            tds[1].style.fontSize = '14';

            tds[4].style.fontWeight = 'bold';
            tds[4].style.fontSize = '14';

            tds[5].style.fontWeight = 'bold';
            tds[5].style.fontSize = '14';
          });
        }
      },
    },
    mounted() {
       // ...
        },
        
     });