el-table多级表头height

el-table多级表头的高度（height）由其最底层的表头单元格的高度决定。如果最底层的表头单元格有设置高度，则整个表头的高度就是该高度。如果最底层的表头单元格没有设置高度，则会自动计算其内容的高度作为表头的高度。如果多级表头的各级表头单元格高度不一致，则整个表头的高度会以最高的表头单元格高度为准。

相关问题

el-table多级表头 合计

对于el-table多级表头的合计，可以使用el-table-column的prop属性来指定数据字段，然后在el-table-column中使用slot-scope来自定义表头内容，最后在el-table-column中使用header-cell-render来自定义表头单元格的渲染方式。在header-cell-render中可以使用this.$scopedSlots来获取自定义的表头内容，并通过计算属性来实现多级表头的合并和渲染。

示例代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="成绩">
      <el-table-column prop="math" label="数学" :header-cell-render="renderHeader"></el-table-column>
      <el-table-column prop="english" label="英语" :header-cell-render="renderHeader"></el-table-column>
      <el-table-column prop="chinese" label="语文" :header-cell-render="renderHeader"></el-table-column>
      <el-table-column label="总分" :header-cell-render="renderHeader">
        <template slot-scope="{ row }">{{ row.math + row.english + row.chinese }}</template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '小明', math: 80, english: 90, chinese: 85 },
        { name: '小红', math: 90, english: 85, chinese: 95 },
        { name: '小刚', math: 85, english: 95, chinese: 90 }
      ]
    }
  },
  methods: {
    renderHeader({ column, $index }) {
      if ($index === 0) {
        return {
          rowspan: 2,
          colspan: 1,
          content: column.label
        }
      } else if ($index === 1 || $index === 2 || $index === 3) {
        return {
          rowspan: 1,
          colspan: 1,
          content: column.label
        }
      } else if ($index === 4) {
        return {
          rowspan: 2,
          colspan: 1,
          content: column.label
        }
      }
    }
  }
}
</script>

el-table多级表头高度

el-table的多级表头高度与普通表头的高度相同，可以通过设置表头行高和单元格内部元素的高度来调整表头高度。 例如：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column label="用户信息">
    <el-table-column prop="name" label="姓名" width="150"></el-table-column>
    <el-table-column prop="age" label="年龄" width="100"></el-table-column>
  </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>
</el-table>

可以通过设置el-table-column的height属性来调整表头行高，例如：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column label="用户信息" height="60">
    <el-table-column prop="name" label="姓名" width="150"></el-table-column>
    <el-table-column prop="age" label="年龄" width="100"></el-table-column>
  </el-table-column>
  <el-table-column label="地址" height="60">
    <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>
</el-table>

可以通过在单元格内部元素（如文本、图标等）中设置line-height属性来调整单元格内部元素的高度，例如：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column label="用户信息">
    <el-table-column prop="name" label="姓名" width="150">
      <template slot-scope="{row}">
        <div style="line-height: 40px">{{row.name}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄" width="100">
      <template slot-scope="{row}">
        <div style="line-height: 40px">{{row.age}}</div>
      </template>
    </el-table-column>
  </el-table-column>
  <el-table-column label="地址">
    <el-table-column prop="province" label="省份" width="120">
      <template slot-scope="{row}">
        <div style="line-height: 40px">{{row.province}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="city" label="市区" width="120">
      <template slot-scope="{row}">
        <div style="line-height: 40px">{{row.city}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址" width="300">
      <template slot-scope="{row}">
        <div style="line-height: 40px">{{row.address}}</div>
      </template>
    </el-table-column>
  </el-table-column>
</el-table>