vue+elementUI table 每列中含有相同值的单元格合并+单元格内容换行+取消鼠标悬停背景色

上一篇博客elementUI table合并同元素的行+点击新增按钮对应行带到另一个列表+上下移操作的合并只是针对某一列，这篇是针对每一列。

效果图：

一、合并每列中含有相同值的单元格

html代码

<el-table
  :data="data"
  :span-method="(...arg) => strategySpanMethod(...arg, data)"
  v-loading="loading"
  element-loading-text="数据加载中"
  element-loading-spinner="el-icon-loading"
  :header-cell-style="{ backgroundColor: '#d3e7ff', textAlign: 'center' }"
  size="mini"
  border
  highlight-current-row="true"
  :cell-style="{ textAlign: 'center' }"
>

js代码

// 合并单元格函数
strategySpanMethod: function (
  { row, column, rowIndex, columnIndex },
  data
) {
  // data 就是从这里动态传过来的, column.property是表头的key
  var spanArr = this.getSpanArr(data, column.property);
  const _row = spanArr[rowIndex];
  const _col = _row > 0 ? 1 : 0;
  return {
    rowspan: _row,
    colspan: _col,
  };
},

// 处理合并行的数据
getSpanArr(data, spanKey) {
  var spanArr = [];
  var pos = "";
  for (var i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.push(1);
      pos = 0;
    } else {
      // 判断当前元素与上一个元素是否相同
      if (data[i][spanKey] === data[i - 1][spanKey]) {
        spanArr[pos] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        pos = i;
      }
    }
  }
  return spanArr;
},

二、单元格内容换行

从后端取值：

<style lang="less" scoped>
	/deep/ .el-table .cell {
	  white-space: pre-line; //不保留空白符序列，进行换行。
	  height: auto !important;
	}
</style>

三、取消鼠标悬停背景色

<style lang="less" scoped>
	/deep/ .el-table tbody tr:hover > td {
	  background-color: transparent !important;
	}
</style>

四、针对后端返回的数据格式渲染表格

this.$axios
.get(api)
.then((res) => {
  this.data = [];
  this.loading = false;
  if (res.data.status) {
    this.iType = res.data.data.iType;
    if (this.iType == 2) {
      this.data = [];
      res.data.data.Logic.Steps.map((v1) => {
        v1.Phases.map((v2) => {
          this.data.push({
            iUnum: v1.iUnum,
            iStepNum: v1.iStepNum,
            cPhaseName: v1.cPhaseName,
            cStepDescs: v1.cStepDescs,
            cAboutVis: v2.cAboutVis,
            cExecuteTxt: v2.cExecuteTxt, //报告值
            cFunctionName: v2.cFunctionName,
            dTime:
              v2.PhaseExecutes != ""
                ? v2.PhaseExecutes[0].dStartTime.split(" ")[1]
                : "", //只要时分秒
          });
          this.data.push({
            iUnum: v1.iUnum,
            iStepNum: v1.iStepNum,
            cPhaseName: v1.cPhaseName,
            cStepDescs: v1.cStepDescs,
            cAboutVis: v2.cAboutVis,
            cExecuteTxt: v2.cExecuteTxt, //报告值
            cFunctionName: v2.cFunctionName,
            dTime:
              v2.PhaseExecutes != ""
                ? v2.PhaseExecutes[0].dEndTime.split(" ")[1]
                : "",
          });
        });
        v1.Barcodes.map((v3) => {
          this.data.push({
            iUnum: v1.iUnum,
            iStepNum: v1.iStepNum,
            cPhaseName: v1.cPhaseName,
            cStepDescs: v1.cStepDescs,
            cAboutVis: v3.cItems + "\n" + v3.cCode + "\n" + v3.iQty,
            cFunctionName: "手投料",
          });
          v3.Items.map((v4) => {
            this.data.push({
              iUnum: v1.iUnum,
              iStepNum: v1.iStepNum,
              cPhaseName: v1.cPhaseName,
              cStepDescs: v1.cStepDescs,
              cAboutVis: v3.cItems + "\n" + v3.cCode + "\n" + v3.iQty,
              cExecuteTxt: v4.iMatlQty, //报告值
              cFunctionName: "手投料",
              dTime: v4.dCreatedDate.split(" ")[1],
            });
          });
        });
      });
    }
  }
});

参考博客：
vue+element-ui之span-method属性实现相同数据合并单元格