el-table多级表头高度
时间: 2023-10-04 07:03:33 浏览: 112
vue3 el-table多级表头收缩扩展的实现(TS风味版)
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>
```
阅读全文