vue elementui表格合并行列

vue elementui表格合并行列

效果

代码

html

 <el-table
        v-show="tableType === '景区门票'"
        :data="tableData"
        border
        id="ticketTable"
        :header-cell-style="getRowClass"
        :span-method="ticketObjectSpanMethod"
        style="width: 100%"
        :cell-style="isRed"
      >
        <el-table-column
          prop="parentName"
          label="景区名称"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="orderType" label="产品类型" align="center">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="产品名称"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="orderChannel" label="销售渠道" align="center">
        </el-table-column>
        <el-table-column label="销售" align="center">
          <el-table-column prop="orderCount" label="数量（人）" align="center">
          </el-table-column>
          <el-table-column
            prop="aliSaleAmount"
            label="支付宝（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="wxSaleAmount"
            label="微信（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="cashSaleAmount"
            label="现金（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="totalSaleAmount"
            label="合计（元）"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="已退款" align="center">
          <el-table-column prop="refundCount" label="数量（人）" align="center">
          </el-table-column>

          <el-table-column
            prop="aliRefundAmount"
            label="支付宝（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="wxRefundAmount"
            label="微信（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="cashRefundAmount"
            label="现金（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="totalRefundAmount"
            label="合计（元）"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="结余" align="center">
          <el-table-column
            prop="aliIncomeAmount"
            label="支付宝（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="wxIncomeAmount"
            label="微信（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="cashIncomeAmount"
            label="现金（元）"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="incomeAmount"
            label="合计（元）"
            align="center"
          >
          </el-table-column>
        </el-table-column>
      </el-table>

function 函数

//改变表头颜色
 getRowClass({ row, rowIndex, columnIndex }) {
      if (
        rowIndex == 1 &&
        (columnIndex == 4 || columnIndex == 9 || columnIndex == 13)
      ) {
        return "background:#ff0";
      } else {
        return "";
      }
    },
    
 //行 列 行号 列号   改变表格颜色
 isRed({ row, column, rowIndex, columnIndex }) {
      if (
        (row.parentCode == "合计" || row.typeName == "合计") &&
        (columnIndex == 1 || columnIndex == 0)
      ) {
        return {
          backgroundColor: "#ff0",
        };
      }

      if (
        (row.productName == "合计" || row.productName == "小计") &&
        columnIndex == 1
      ) {
        return {
          backgroundColor: "rgb(176 251 57)",
        };
      }
},

ticketFlitterData(arr) {
      let spanOneArr = [];
      let spanTwoArr = [];
      let spanThreeArr = [];
      let concatOne = 0;
      let concatTwo = 0;
      let concatThree = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
          spanTwoArr.push(1);
          spanThreeArr.push(1);
        } else {
          //id
          if (item.parentCode === arr[index - 1].parentCode) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }

          if (
            item.parentCode === arr[index - 1].parentCode &&
            item.orderType === arr[index - 1].orderType
          ) {
            //第二列需合并相同内容的判断条件
            spanTwoArr[concatTwo] += 1;
            spanTwoArr.push(0);
          } else {
            spanTwoArr.push(1);
            concatTwo = index;
          }

          if (
            item.parentCode === arr[index - 1].parentCode &&
            item.productCode === arr[index - 1].productCode
          ) {
            //第二列需合并相同内容的判断条件
            spanThreeArr[concatThree] += 1;
            spanThreeArr.push(0);
          } else {
            spanThreeArr.push(1);
            concatThree = index;
          }
        }
      });

      return {
        one: spanOneArr,
        two: spanTwoArr,
        three: spanThreeArr,
      };
},

//行 列 行号 列号
ticketObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //合并列
      if (rowIndex == this.tableData.length - 1) {
        if (columnIndex === 0) {
          return [1, 4];
        } else if (columnIndex === 1) {
          return [0, 0];
        } else if (columnIndex === 2) {
          return [0, 0];
        } else if (columnIndex === 3) {
          return [0, 0];
        }
      }

      if (
        row.orderChannel == "小计" &&
        row.productName == "小计" &&
        row.orderType == "小计"
      ) {
        if (columnIndex === 1) {
          return [1, 3];
        } else if (columnIndex === 2) {
          return [0, 0];
        } else if (columnIndex === 3) {
          return [0, 0];
        }
      }
     //合并行
      if (columnIndex === 0) {
        // this.tableData  修改
        const _row = this.ticketFlitterData(this.tableData).one[rowIndex];

        const _col = _row > 0 ? 1 : 0;

        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 1) {
        // this.tableData  修改
        const _row = this.ticketFlitterData(this.tableData).two[rowIndex];

        const _col = _row > 0 ? 1 : 0;

        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 2) {
        // this.tableData  修改
        const _row = this.ticketFlitterData(this.tableData).three[rowIndex];

        const _col = _row > 0 ? 1 : 0;

        return {
          rowspan: _row,
          colspan: _col,
        };
      }
 },