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  scoped>
	/deep/ .el-table .cell {
	  white-space: pre-line; //不保留白白符序列，進行換行。
	  height: auto !important;
	}
</style>
           

三、取消滑鼠懸停背景色

<style  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屬性實作相同資料合并單元格