el-table 合并表头 -- 合并单元格 -- 表尾合计 -- 修改/拆分合并单元格 -- 动态单元格合并 -- 动态合并单元格

0 动态合并单元格方法本文写的有点繁琐，以下这篇文章将提供更简单的实现办法

el-table 动态合并单元格

1 合并表头

1.1 合并物品数量与邮件数量的表头

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      ref="tableRef"
    >
      <el-table-column prop="date" label="日期" width="150"> </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column prop="articleNumber" label="物品数量" width="120">
          </el-table-column>
          <el-table-column prop="zipNumber" label="邮件数量" width="120">
          </el-table-column>
          <el-table-column prop="zipNumber" label="数量" width="120">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "tableMerge",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
      ],
    };
  },
  methods: {
    // 表头合并与样式
    // { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      // 由于是多级表头 -- 合并目标表头在第三层 -- 寻找第三级表头
      if (row[0].level === 3) {
        // 第 4  5 列合并
        row[4].colSpan = 2;
        row[5].colSpan = 0;
        // 根据列数进行样式赋予  
        if (columnIndex === 5) {
          return { display: "none" };
        }
      }
      return {
        color: "#333333",
        fontWeight: "bold",
        textAlign: "center",
      };
    },
  },
};
</script>

<style scoped lang="less">
</style>
合并前
合并后

2 合并列/行单元格

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :span-method="spanMethod"
      ref="tableRef"
    >
      <el-table-column prop="date" label="日期" width="150"> </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column prop="articleNumber" label="物品数量" width="120">
          </el-table-column>
          <el-table-column prop="zipNumber" label="邮件数量" width="120">
          </el-table-column>
          <el-table-column prop="zipNumber" label="数量" width="120">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "tableMerge",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
      ],
    };
  },
  methods: {
    // 表头合并与样式
    // { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      // 由于是多级表头 -- 合并目标表头在第三层 -- 寻找第三级表头
      if (row[0].level === 3) {
        // 第 4  5 列合并
        row[4].colSpan = 2;
        row[5].colSpan = 0;
        // 根据列数进行样式赋予  
        if (columnIndex === 5) {
          return { display: "none" };
        }
      }
      return {
        color: "#333333",
        fontWeight: "bold",
        textAlign: "center",
      };
    },
    // 单元格样式
    // 为合并单元格的列设置样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 6 || columnIndex == 7) {
        return { color: "pink", textAlign: "center" };
      } else {
        return { textAlign: "center" };
      }
    },
    // 合并单元格
    // { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并行 -- 除余匹配行
      if (rowIndex % 3 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
      // 合并列 -- 指定列
      if (columnIndex == 6 || columnIndex == 7) {
        if (rowIndex % this.tableData.length == 0) {
          return {
            rowspan: this.tableData.length,
            colspan: 1,
          };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
</style>
合并前

合并后

3 表尾合计

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :span-method="spanMethod"
      :summary-method="summariesMethod"
      show-summary
      ref="tableRef"
    >
      <el-table-column prop="date" label="日期" width="150"> </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column prop="articleNumber" label="物品数量" width="120">
          </el-table-column>
          <el-table-column prop="zipNumber" label="邮件数量" width="120">
          </el-table-column>
          <el-table-column prop="zipNumber" label="数量" width="120">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "tableMerge",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
      ],
    };
  },
  methods: {
    // 表头合并与样式
    // { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      // 由于是多级表头 -- 合并目标表头在第三层 -- 寻找第三级表头
      if (row[0].level === 3) {
        // 第 4  5 列合并
        row[4].colSpan = 2;
        row[5].colSpan = 0;
        // 根据列数进行样式赋予  
        if (columnIndex === 5) {
          return { display: "none" };
        }
      }
      return {
        color: "#333333",
        fontWeight: "bold",
        textAlign: "center",
      };
    },
    // 单元格样式
    // 为合并单元格的列设置样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 6 || columnIndex == 7) {
        return { color: "pink", textAlign: "center" };
      } else {
        return { textAlign: "center" };
      }
    },
    // 合并单元格
    // { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并行 -- 除余匹配行
      if (rowIndex % 3 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
      // 合并列 -- 指定列
      if (columnIndex == 6 || columnIndex == 7) {
        if (rowIndex % this.tableData.length == 0) {
          return {
            rowspan: this.tableData.length,
            colspan: 1,
          };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
    // 合计
    summariesMethod({ columns, data }) {
       let sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map((item) => Number(item[column.property]));
          if (
            !values.every((value) => isNaN(value)) && 
            index == 8
            
          ) {
            // 判断值不为NaN
            sums[index] = values.reduce((prev, curr) => {
              // 通过reduce累加
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = '/';
          }
          return sums;
        });

        // 异步将合计栏合并单元格，避免阻塞合计栏数据结构的返回
        this.timer = setTimeout(() => {
          if (this.$refs.tableRef.$el) {
            let current = this.$refs.tableRef.$el
              .querySelector('.el-table__footer-wrapper')
              .querySelector('.el-table__footer');

            let cell = current.rows[0].cells; // 获取列实例
            cell[5].style.display = 'none'; // 针对合并表头的列进行实例消除 --- 需跟表头合并区域对照
            Array.from(cell).forEach((x) => {
              x.style.textAlign = 'center';
            });
          }
        }, 50);
        // 对合计值进行保留两位小数
        sums = sums.map((x) => {
          if (x !== '合计' && x !== '/') {
            return String(Number(x).toFixed(2)) + '个';
          } else {
            return x;
          }
        });
        return sums;
    },
  },
};
</script>

<style scoped lang="less">
</style>
image.png

4 修改/拆分合并单元格

  • 通过数据集合mergeRules来制定合并规则，只要改变mergeRules里规则绑定值即可使其改变合并规则，以下只展示了最基础的代码，提供过方法后，具体怎么扩展，可根据实际需求进行改动
<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :span-method="spanMethod"
      ref="tableRef"
    >
      <el-table-column prop="date" label="日期" width="150"> </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column prop="articleNumber" label="物品数量" width="120">
          </el-table-column>
          <el-table-column prop="zipNumber" label="邮件数量" width="120">
          </el-table-column>
          <el-table-column prop="zipNumber" label="数量" width="120">
          </el-table-column>
          <el-table-column prop="" label="操作" width="120">
            <template v-slot="scoped">
              <el-button type="text" @click="tableSplit(scoped)"
                >拆分</el-button
              >
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "tableMerge",
  data() {
    return {
      // column 行未合并规则
      // columnMergr 行合并规则
      // line 列未合并规则
      // lineMerge 列合并规则
      mergeRules: [
        {
          column: [0, 0],
          columnMergr: [1, 2],
          line: [0, 0],
          lineMerge: [1, 1],
        },
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
      ],
    };
  },
  mounted() {
    this.mergeRules[0].lineMerge = [this.tableData.length, 1];
  },
  methods: {
    // 单元格样式
    // 为合并单元格的列设置样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 6 || columnIndex == 7) {
        return { color: "pink", textAlign: "center" };
      } else {
        return { textAlign: "center" };
      }
    },
    // 合并单元格
    // { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并行 -- 除余匹配行
      if (rowIndex % 3 === 0) {
        if (columnIndex === 0) {
          return this.mergeRules[0].columnMergr;
        } else if (columnIndex === 1) {
          return this.mergeRules[0].column;
        }
      }
      // 合并列 -- 指定列
      if (columnIndex == 6 || columnIndex == 7) {
        if (rowIndex % this.tableData.length == 0) {
          return {
            rowspan: this.mergeRules[0].lineMerge[0],
            colspan: this.mergeRules[0].lineMerge[1],
          };
        } else {
          return {
            rowspan: this.mergeRules[0].line[0],
            colspan: this.mergeRules[0].line[1],
          };
        }
      }
    },
    // 拆分单元格 -- 重新制定合并规则
    tableSplit(scoped) {
      this.mergeRules[0].columnMergr = [1, 1];
      this.mergeRules[0].column = [1, 1];
      this.mergeRules[0].line = [1, 1];
      this.mergeRules[0].lineMerge = [1, 1];
    },
  },
};
</script>

<style scoped lang="less">
</style>
拆分/改变合并规则前

拆分/改变合并规则后

5 动态单元格合并

  • 以上描述的均为指定合并，不够灵活，无法根据数据的改变去动态进行合并单元格

5.1 数据项

  • 可以看到，需要合并的单元格的ID是一致的，下面也会根据id来动态制定规则
tableData: [
        { 
          id:'1',
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id:'1',
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id:'2',
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id:'3',
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id:'3',
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id:'3',
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },;
        {
          id:'4',
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
      ],

5.2 根据数据项标识 id 动态制定合并规则

mergingRule() {
      // 制定合并单元格规则
      // this.mergingRule = [];
      const arr = [];
      this.tableData.forEach((x, index) => {
        const value = arr.find((v) => x.id === v.id);
        // 如果找到相同的ID项，则视为隐藏该项  规则写入0
        if (value) {
          this.mergeSpanRules.push(0);
          this.cellSpanRules.push(0);
        } else {
          // 如果没找到  则视为合并单元格起始位置
          this.mergeSpanRules.push(index);
          arr.push(x);
          // 根据id查有几个 跟第一次循环到是数据id 项相同的, 用来判断要合并几列
          const list = [];
          this.tableData.forEach((v) => {
            if (v.id === x.id) {
              list.push(v);
            }
          });
          this.cellSpanRules.push(list.length);
        }
      });
      console.log(this.mergeSpanRules, this.cellSpanRules);
    },
    // 合并单元格
    // { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 动态合并
      // 合并第一列 || 第二列
      if (columnIndex === 0 || columnIndex === 1) {
        // 根据行数索引 取出合并开始位置
        const colspan = this.mergeSpanRules[rowIndex];
        // 判断行索引位置跟开始位置是否一致
        if (rowIndex === colspan) {
          // 根据行索引  取出合并多少行的规则
          return {
            rowspan: this.cellSpanRules[rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  • 可以从控制台看到：
    1， this.mergeSpanRules代表合并起始位置，0代表不参与合并，但由于第一条数据的索引为0，所以展示成了0，但不会影响效果，因为下边将会把起始位置跟行的索引位置比较，要是觉得不够直观的话，可以把0代表不参这个值改成任意字符来表示，但切记不要用除0外的数字。
    2，this.cellSpanRules代表合并数（合并几列），0代表不展示。
    效果图

5.3 完整代码

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :span-method="spanMethod"
      :summary-method="summariesMethod"
      show-summary
      ref="tableRef"
    >
      <el-table-column prop="date" label="日期" width="150"> </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column prop="articleNumber" label="物品数量" width="120">
          </el-table-column>
          <el-table-column prop="zipNumber" label="邮件数量" width="120">
          </el-table-column>
          <el-table-column prop="zipNumber" label="数量" width="120">
          </el-table-column>
          <!-- <el-table-column prop="" label="操作" width="120"> -->
          <!-- <template v-slot="scoped">
              <el-button type="text" @click="tableSplit(scoped)"
                >拆分</el-button
              >
            </template> -->
          <!-- </el-table-column> -->
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "tableMerge",
  data() {
    return {
      // column 行未合并规则
      // columnMergr 行合并规则
      // line 列未合并规则
      // lineMerge 列合并规则
      // mergeRules: [
      //   {
      //     column: [0, 0],
      //     columnMergr: [1, 2],
      //     line: [0, 0],
      //     lineMerge: [1, 1],
      //   },
      // ],
      // 动态规则
      mergeSpanRules: [],
      cellSpanRules: [],
      tableData: [
        {
          id: "1",
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "3",
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "3",
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "4",
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
      ],
    };
  },
  mounted() {
    // this.mergeRules[0].lineMerge = [this.tableData.length, 1];
    this.mergingRule();
  },
  methods: {
    // 表头合并与样式
    // { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      // 寻找第三级表头
      if (row[0].level === 3) {
        row[4].colSpan = 2;
        row[5].colSpan = 0;
        // 根据列数进行样式赋予
        if (columnIndex === 5) {
          return { display: "none" };
        }
      }
      return {
        color: "#333333",
        fontWeight: "bold",
        textAlign: "center",
      };
    },
    // 单元格样式
    // 为合并单元格的列设置样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 6 || columnIndex == 7) {
        return { color: "pink", textAlign: "center" };
      } else {
        return { textAlign: "center" };
      }
    },
    mergingRule() {
      // 制定合并单元格规则
      // this.mergingRule = [];
      const arr = [];
      this.tableData.forEach((x, index) => {
        const value = arr.find((v) => x.id === v.id);
        // 如果找到相同的ID项，则视为隐藏该项  规则写入0
        if (value) {
          this.mergeSpanRules.push(0);
          this.cellSpanRules.push(0);
        } else {
          // 如果没找到  则视为合并单元格起始位置
          this.mergeSpanRules.push(index);
          arr.push(x);
          // 根据id查有几个 跟第一次循环到是数据id 项相同的, 用来判断要合并几列
          const list = [];
          this.tableData.forEach((v) => {
            if (v.id === x.id) {
              list.push(v);
            }
          });
          this.cellSpanRules.push(list.length);
        }
      });
      console.log(this.mergeSpanRules, this.cellSpanRules);
    },
    // 合并单元格
    // { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // // 合并行 -- 除余匹配行
      // if (rowIndex % 3 === 0) {
      //   if (columnIndex === 0) {
      //     return this.mergeRules[0].columnMergr;
      //   } else if (columnIndex === 1) {
      //     return this.mergeRules[0].column;
      //   }
      // }
      // // 合并列 -- 指定列
      // if (columnIndex == 6 || columnIndex == 7) {
      //   if (rowIndex % this.tableData.length == 0) {
      //     return {
      //       rowspan: this.mergeRules[0].lineMerge[0],
      //       colspan: this.mergeRules[0].lineMerge[1],
      //     };
      //   } else {
      //     return {
      //       rowspan: this.mergeRules[0].line[0],
      //       colspan: this.mergeRules[0].line[1],
      //     };
      //   }
      // }
      // 动态合并
      // 合并第一列 || 第二列
      if (columnIndex === 0 || columnIndex === 1) {
        // 根据行数索引 取出合并开始位置
        const colspan = this.mergeSpanRules[rowIndex];
        // 判断行索引位置跟开始位置是否一致
        if (rowIndex === colspan) {
          // 根据行索引  取出合并多少行的规则
          return {
            rowspan: this.cellSpanRules[rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    // 拆分单元格 -- 重新制定合并规则
    tableSplit(scoped) {
      this.mergeRules[0].columnMergr = [1, 1];
      this.mergeRules[0].column = [1, 1];
      this.mergeRules[0].line = [1, 1];
      this.mergeRules[0].lineMerge = [1, 1];
    },
    // 合计
    summariesMethod({ columns, data }) {
      let sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value)) && index == 8) {
          // 判断值不为NaN
          sums[index] = values.reduce((prev, curr) => {
            // 通过reduce累加
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += "";
        } else {
          sums[index] = "/";
        }
        return sums;
      });

      // 异步将合计栏合并单元格，避免阻塞合计栏数据结构的返回
      this.timer = setTimeout(() => {
        if (this.$refs.tableRef.$el) {
          let current = this.$refs.tableRef.$el
            .querySelector(".el-table__footer-wrapper")
            .querySelector(".el-table__footer");

          let cell = current.rows[0].cells; // 获取列实例
          cell[5].style.display = "none"; // 针对合并表头的列进行实例消除 --- 需跟表头合并区域对照
          Array.from(cell).forEach((x) => {
            x.style.textAlign = "center";
          });
        }
      }, 50);
      // 对合计值进行保留两位小数
      sums = sums.map((x) => {
        if (x !== "合计" && x !== "/") {
          return String(Number(x).toFixed(2)) + "个";
        } else {
          return x;
        }
      });
      return sums;
    },
  },
};
</script>

<style scoped lang="less">
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,393评论 5赞 467
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,790评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,391评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,703评论 1赞 270
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,613评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,003评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,507评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,158评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,300评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,984评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,569评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2赞 339

推荐阅读更多精彩内容