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

已于 2024-05-16 09:23:43 修改
阅读量363 收藏 8
点赞数 3
分类专栏： Vue 文章标签： 前端
于 2024-05-16 09:23:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/st646889325/article/details/138943420
版权

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>

在这里插入图片描述

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>

在这里插入图片描述

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>
st646889325
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值