Vue和 ElementUI 合并单元格实现 记录

概要

最近遇到个需求 实现ElementUI 表格 主要 采用 vue 和 elementUI 实现 底层单元格内容合并 记录下

先上代码

代码实现

<template>
  <el-table
      :data="tableData"
      border
      style="width: 100%"
      :show-header="false"
      :span-method="arraySpanMethod"
  >
    <el-table-column
        prop="label1"
        width="200px"
        label="">
      <template v-slot="scope">
        {{ scope.row.label1 }}
      </template>
    </el-table-column>
    <el-table-column
        prop="value1"
        label="">
      <template v-slot="scope">
        {{ scope.row.value1 }}
      </template>
    </el-table-column>
    <el-table-column
        prop="label2"
        width="200px"
        label="">
      <template v-slot="scope">
        {{ scope.row.label2 }}
      </template>
    </el-table-column>
    <el-table-column
        prop="value2"
        label="">
      <template v-slot="scope">
        {{ scope.row.value2 }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'testDemo',
  data() {
    return {
      tableData: [
        { label1: '企业名称', value1: '百度', label2: '曾用名', value2: '曾用名1' },
        { label1: '统一社会信用代码', value1: '代码123', label2: '法定代表人', value2: '张三' },
        { label1: '组织机构代码', value1: '代码456', label2: '国标行业', value2: '行业类别' },
        { label1: '企业类型', value1: '有限责任公司', label2: '注册资本（万元）', value2: '1000万元' },
        { label1: '所属地区', value1: '上海', label2: '登记机关', value2: '上海市工商行政管理局' },
        { label1: '注册地址', value1: '上海市浦东新区', label2: '经营地址', value2: '上海市浦东新区' },
        { label1: '经营期限', value1: '2020-2025', label2: '开立日期', value2: '2020-01-01' },
        { label1: '经营状态', value1: '正常', label2: '注销日期', value2: '-' },
        { label1: '人员规模', value1: '100-500人', label2: '参保人数', value2: '450人' },
        { label1: '经营范围', value1: '软件开发、技术服务', label2: '', value2: ''}
      ]
    };
  },
  methods: {
    arraySpanMethod({ rowIndex, columnIndex }) {
      if (rowIndex === this.tableData.length - 1) {
        if (columnIndex === 2 || columnIndex === 3) {
          return [0, 0];
        }
        if (columnIndex === 1) {
          return [1, 3];
        }
      }
      return [1, 1];
    }
  }
};
</script>

<style scoped>
.el-table th, .el-table td {
  text-align: left;
  font-weight: normal;
}

.el-table th {
  background-color: #f5f7fa !important;
}

.el-table td {
  background-color: #ffffff !important;
}
</style>

最终实现的效果大致如下图

arraySpanMethod({ rowIndex, columnIndex }) {
      if (rowIndex === this.tableData.length - 1) {
        if (columnIndex === 2 || columnIndex === 3) {
          return [0, 0];
        }
        if (columnIndex === 1) {
          return [1, 3];
        }
      }
      return [1, 1];
    }

检查是否是最后一行 如果是最后一行，检查列索引 // 对于最后一行的 label2 和 value2 列，返回 [0, 0] 使其不显示 // 对于最后一行的 label1 列，返回 [1, 3] 使其合并 label2 value2 横跨 1行 3 列 return [1, 1]; // 默认不合并

小结

在实现 Element UI 表格的单元格内容合并时，arraySpanMethod 方法是关键。这个方法允许你自定义单元格的合并行为。 通过 :span-method=“arraySpanMethod” 属性应用自定义的单元格合并逻辑。