el-table多级表头height

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

相关问题

el-table多级表头渲染

可以使用 el-table 的 column 属性来实现多级表头渲染。具体步骤如下：

1. 在 el-table-column 中设置 prop 属性，用于指定该列对应数据源中的字段名。
2. 在 el-table-column 中设置 label 属性，用于指定该列的表头名称。
3. 在 el-table-column 中设置 children 属性，用于指定该列下的子列。
4. 在子列中重复以上步骤，直到达到所需的表头层级。

示例代码如下：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column label="联系方式">
    <el-table-column prop="phone" label="电话"></el-table-column>
    <el-table-column prop="email" label="邮箱"></el-table-column>
  </el-table-column>
  <el-table-column label="地址">
    <el-table-column prop="province" label="省份"></el-table-column>
    <el-table-column prop="city" label="城市"></el-table-column>
    <el-table-column prop="address" label="详细地址"></el-table-column>
  </el-table-column>
</el-table>

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>