ElementUI Table 组件实现表头合并和列精简方案

要实现类似"基本信息"表头合并及"类别"列精简的效果，可以使用 ElementUI Table 组件的多级表头功能。以下是具体实现方法：

方案一：使用多级表头实现表头合并

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="category" label="类别" width="120"></el-table-column>

    <!-- 合并"基本信息"表头 -->
    <el-table-column label="基本信息">
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80"></el-table-column>
      <el-table-column prop="gender" label="性别" width="80"></el-table-column>
    </el-table-column>

    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        category: '类别1',
        name: '张三',
        age: 30,
        gender: '男',
        address: '北京市海淀区'
      }, {
        category: '类别2',
        name: '李四',
        age: 28,
        gender: '女',
        address: '上海市浦东新区'
      }]
    }
  }
}
</script>

方案二：进一步精简"类别"列

如果"类别"列中有大量重复数据，可以通过以下方式优化：

1. 合并相同类别的行：

<template>
  <el-table 
    :data="tableData" 
    border 
    style="width: 100%"
    :span-method="objectSpanMethod">
    <!-- 其他列定义 -->
  </el-table>
</template>

<script>
export default {
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 只对类别列处理
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
}
</script>

2. 使用行分组：

<template>
  <div>
    <div v-for="(group, index) in groupedData" :key="index">
      <div class="group-header">{{ group.category }}</div>
      <el-table 
        :data="group.items" 
        border 
        style="width: 100%"
        :show-header="index === 0">
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="age" label="年龄" width="80"></el-table-column>
        <el-table-column prop="gender" label="性别" width="80"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    groupedData() {
      // 按类别分组数据
      const groups = {};
      this.tableData.forEach(item => {
        if (!groups[item.category]) {
          groups[item.category] = [];
        }
        groups[item.category].push(item);
      });

      return Object.keys(groups).map(category => ({
        category,
        items: groups[category]
      }));
    }
  }
}
</script>

<style>
.group-header {
  padding: 10px;
  background-color: #f5f7fa;
  font-weight: bold;
  border: 1px solid #ebeef5;
  border-bottom: none;
}
</style>

方案三：使用表头分组和行合并结合

<template>
  <el-table 
    :data="tableData" 
    border 
    style="width: 100%"
    :span-method="objectSpanMethod">

    <el-table-column prop="category" label="类别" width="120"></el-table-column>

    <el-table-column label="基本信息">
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80"></el-table-column>
      <el-table-column prop="gender" label="性别" width="80"></el-table-column>
    </el-table-column>

    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    // 计算合并的行和列
    getSpanArr(data) {
      const spanArr = [];
      let pos = 0;

      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          spanArr.push(1);
          pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].category === data[i - 1].category) {
            spanArr[pos] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            pos = i;
          }
        }
      }
      return spanArr;
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const spanArr = this.getSpanArr(this.tableData);
        const rowspan = spanArr[rowIndex];
        const colspan = rowspan > 0 ? 1 : 0;

        return {
          rowspan,
          colspan
        };
      }
    }
  }
}
</script>

注意事项

1. 多级表头嵌套不宜过深，一般建议不超过3层
2. 行合并时要注意数据排序，确保相同类别的数据相邻
3. 对于大数据量的表格，复杂的合并操作可能会影响性能
4. 移动端设备上多级表头可能显示不佳，需要考虑响应式设计

以上方案可以根据实际需求选择或组合使用，以达到最佳的表头合并和列精简效果。