element 合并单元格

线上体验地址

<template>
  <div class="app-container home">
    <el-card class="box-card">
      <el-table :data="tableData" :span-method="objectSpanMethod" border>
        <el-table-column
          prop="id"
          label="ID"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="银行"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="数值"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" width="180" align="center">
          <template>
            <el-button type="text" size="small">修改</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "tableRow",
  data() {
    return {
      rowspan: [],
      tableData: [
        {
          id: 1,
          name: "建设银行",
          data: [
            { amount: "6,802.47" },
            { amount: "307,943.03" },
            { amount: "116,245.19" },
          ],
        },
        {
          id: 2,
          name: "中信银行",
          data: [{ amount: "45.68" }, { amount: "264,938.09" }],
        },
        {
          id: 3,
          name: "招商银行",
          data: [
            { amount: "23,028.52" },
            { amount: "130,017.66" },
            { amount: "899.75" },
            { amount: "5,110.80" },
          ],
        },
      ],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      let data = this.tableData;
      let arr = []; //存放格式后的数据
      let rowspan = []; //存放数组每行的 合并row 数据
      data.forEach((item) => {
        let { data = [], ...others } = item;
        data = data.map((item, index) => {
          if (index === 0) {
            rowspan.push(data.length);
          } else {
            rowspan.push(0);
          }
          return { ...others, ...item };
        });
        arr.push(...data);
      });
      this.tableData = arr; //处理好格式的 arr 进行赋值

      this.rowspan = rowspan;
    },

    //单元格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //行，列，行下标，列下标( 控制要合并的列 )
      if ([0, 1, 3].includes(columnIndex)) {
        const _row = this.rowspan[rowIndex];
        const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了，这列也隐藏
        return {
          rowspan: _row, //合并的行数
          colspan: _col, //合并的列数，设为０则直接不显示
        };
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>