el-table 合并表头 -- 合并单元格 -- 表尾合计

作者: 许___ | 来源:发表于2023-07-30 15:03 被阅读0次

table 表格合并行或列
2022-10-25
Metabase-BI系列08：一个关于透视表的PR
合并单元格，取消合并单元格并填充
excel中的合并单元格问题，这里一次性给你讲清楚
带表头表尾的TableView的实现
Excel小技巧：Excel中合并单元格如何填充序号？
学习Web前端（表格）的第一天
基础(四)--创建语义化界面(二)
CSS笔记16：border-collapse

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>

拆分/改变合并规则前

拆分/改变合并规则后

table 表格合并行或列
合并单元格合并边框单元格宽度固定注: 使用标签, 打印时每页可自动生成表头
2022-10-25
el-table合并单元格教程，老板csdn我的文章
Metabase-BI系列08：一个关于透视表的PR
概述 Excel中经常用到合并单元格，制作复杂表头的表格（透视表）。后台系统、财务系统、报表系统等等对于这...
合并单元格，取消合并单元格并填充
一、合并单元格，取消合并单元格选中要合并（取消合并）的单元格，然后选中“开始”--“合并后居中/取消单元格合并”...
excel中的合并单元格问题，这里一次性给你讲清楚
在excel表格中，除了最后总合计之外，是不能存在合并单元格的，因为合并单元格在数据的分析与处理中很容易造成错误。...
带表头表尾的TableView的实现
1. TableView结构表头单元格表尾备注:TableView最多包含3部分(一般不需要表头和表尾)，...
Excel小技巧：Excel中合并单元格如何填充序号？
Excel合并单元格分为规则合并和不规则合并。 Excel中规则合并单元格快速填充序号如下图所示，如果合并单元格...
学习Web前端（表格）的第一天
colspan 合并列单元格（从左到右合并） rowspan 合并行单元格（从上到下合并） colspan="2"...
基础(四)--创建语义化界面(二)
一、表格单元格合并：合并顺序：从上往下，从左至右跨行合并：rowspan="合并的单元格的格子" 跨列合并：...
CSS笔记16：border-collapse
合并表格单元格边框未合并边框时样式未合并表格单元格边框