el-table合并列&同时在分页时不被割裂开

核心思想

合并大表格，留出空间给到slot 插槽，在插槽内使用小表格；

效果图

具体实现

<template>
  <div>
    <el-table
      show-header
      :cell-style="set_cell_style"
      :data="tableData"
      border
      :cell-class-name="cellClassName"
      :span-method="arraySpanMethod"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column header-align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column header-align="center" prop="proName" label="产品简称">
      </el-table-column>
      <el-table-column header-align="center" prop="jsState" label="交收状态">
      </el-table-column>
      <el-table-column header-align="center" prop="mxState" label="明细状态">
      </el-table-column>

      <el-table-column
        header-align="center"
        prop="amount3"
        label="市场"
        width="110"
      >
        <template slot-scope="scope">
          <div class="flex2">
            <div class="flex aic jc-sb">
              <div class="myCell">测试</div>
              <el-table
                show-summary
                :data="scope.row.tableData"
                :show-header="false"
                style="width: 100%; border-left: 1px solid #ebeef5"
              >
                <el-table-column prop="ys_counterparty"> </el-table-column>
                <el-table-column prop="ys_business_type"> </el-table-column>
                <el-table-column prop="ys_amount"> </el-table-column>
                <el-table-column prop="yf_counterparty"> </el-table-column>
                <el-table-column prop="yf_business_type"> </el-table-column>
                <el-table-column prop="yf_amount"> </el-table-column>
              </el-table>
            </div>
            <div class="flex aic jc-sb border-top">
              <div class="myCell">测试</div>
              <el-table
                show-summary
                :data="scope.row.tableData2"
                :show-header="false"
                style="width: 100%; border-left: 1px solid #ebeef5"
              >
                <el-table-column prop="ys_counterparty"> </el-table-column>
                <el-table-column prop="ys_business_type"> </el-table-column>
                <el-table-column prop="ys_amount"> </el-table-column>
                <el-table-column prop="yf_counterparty"> </el-table-column>
                <el-table-column prop="yf_business_type"> </el-table-column>
                <el-table-column prop="yf_amount"> </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column header-align="center" prop="amount3" label="应收">
        <el-table-column header-align="center" prop="amount3" label="交易对手">
        </el-table-column>
        <el-table-column header-align="center" prop="amount3" label="业务类型">
        </el-table-column>
        <el-table-column header-align="center" prop="amount3" label="金额">
        </el-table-column>
      </el-table-column>
      <el-table-column header-align="center" prop="amount3" label="应付">
        <el-table-column header-align="center" prop="amount3" label="交易对手">
        </el-table-column>
        <el-table-column header-align="center" prop="amount3" label="业务类型">
        </el-table-column>
        <el-table-column header-align="center" prop="amount3" label="金额">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="proName" label="委托人"> </el-table-column>
      <el-table-column prop="proName" label="指令状态"> </el-table-column>
      <el-table-column prop="proName" label="xx余额"> </el-table-column>
      <el-table-column prop="proName" label="xx余额"> </el-table-column>
      <el-table-column prop="proName" label="xx余额"> </el-table-column>
      <el-table-column prop="proName" label="合计可用">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          proName: "一号",
          jsState:
            "1、等应收付2、",
          mxState:
            "1.1同市场，，",
          tableData: [
            {
              ys_counterparty: "银行一号", //交易对手
              ys_business_type: "正购", //业务类型
              ys_amount: "10012.00", //金额
              yf_counterparty: "银行一号", //交易对手
              yf_business_type: "正购到期", //业务类型
              yf_amount: "30000", //金额
            },
            {
              ys_counterparty: "一号", //交易对手
              ys_business_type: "正购", //业务类型
              ys_amount: "10012.00", //金额
              yf_counterparty: "一号", //交易对手
              yf_business_type: "正购到期", //业务类型
              yf_amount: "30000", //金额
            },
            {
              ys_counterparty: "一号", //交易对手
              ys_business_type: "正回购", //业务类型
              ys_amount: "10012.00", //金额
              yf_counterparty: "一号", //交易对手
              yf_business_type: "正回购到期", //业务类型
              yf_amount: "30000", //金额
            },
          ],
          tableData2: [
            {
              ys_counterparty: "一号", //交易对手
              ys_business_type: "正购", //业务类型
              ys_amount: "10012.00", //金额
              yf_counterparty: "一号", //交易对手
              yf_business_type: "正购到期", //业务类型
              yf_amount: "30000", //金额
            },
            {
              ys_counterparty: "一号", //交易对手
              ys_business_type: "正购", //业务类型
              ys_amount: "10012.00", //金额
              yf_counterparty: "一号", //交易对手
              yf_business_type: "正购到期", //业务类型
              yf_amount: "30000", //金额
            },
          ],
        },
      ],
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(columnIndex, "columnIndex");
      if (columnIndex === 4) {
        return {
          rowspan: 1,
          colspan: 7,
        };
      } else if (
        columnIndex === 5 ||
        columnIndex === 6 ||
        columnIndex === 7 ||
        columnIndex === 8 ||
        columnIndex === 9 ||
        columnIndex === 10
      ) {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    },
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 0) {
    //     if (rowIndex % 2 === 0) {
    //       return {
    //         rowspan: 2,
    //         colspan: 1,
    //       };
    //     } else {
    //       return {
    //         rowspan: 0,
    //         colspan: 0,
    //       };
    //     }
    //   }
    // },
    set_cell_style({ row, column, rowIndex, columnIndex }) {
      if (column.label === "市场") {
        return "padding:0";
      }
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.label === "市场") {
        return "cellpadding0"; // class名称
      }
    },
  },
};
</script>
<style>
.cellpadding0 .cell {
  padding: 0 !important;
}
.myCell {
  width: 108px;
  text-align: center;
}
.flex2 {
  display: flex;
  flex-direction: column;
}
.flex {
  display: flex;
}
.aic {
  align-items: center;
}
.jc-sb {
  justify-content: space-between;
}
.border-top {
  border-top: 1px solid #ebeef5;
}
</style>