动态高度el-table
时间: 2023-11-11 22:59:00 浏览: 34
要实现动态高度的el-table,可以使用element-ui提供的表格slot来自定义表格的内容。具体实现步骤如下:
1. 在el-table中添加一个slot,例如:
```
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="自定义内容">
<template slot-scope="scope">
<div>{{ scope.row.customContent }}</div>
</template>
</el-table-column>
</el-table>
```
2. 在数据中添加一个customContent字段,用于存放自定义内容。
3. 在计算自定义内容的高度时,可以使用DOM API中的offsetHeight属性来获取元素的高度,例如:
```
mounted() {
this.tableData.forEach(item => {
const div = document.createElement('div')
div.innerHTML = item.customContent
document.body.appendChild(div)
item.height = div.offsetHeight
document.body.removeChild(div)
})
}
```
4. 在el-table中添加一个row-class-name属性,用于设置每一行的class名称,例如:
```
<el-table :data="tableData" :row-class-name="rowClassName">
...
</el-table>
```
5. 在rowClassName方法中返回每一行的class名称,并设置每一行的高度,例如:
```
rowClassName({ row }) {
return `row-${row.id}`
},
```
6. 在样式中设置每一行的高度,例如:
```
.row-1 {
height: 50px;
}
.row-2 {
height: 100px;
}
...
```