el-table中el-table-column嵌套table如何然子table高度随外层table 行得高度变化
时间: 2023-10-30 17:05:47 浏览: 156
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
在el-table中,如果你想要实现子表格的高度随外层表格的行高度变化,你可以使用scoped slot来自定义单元格的内容并控制子表格的高度。
首先,在el-table-column中使用scoped slot来定义单元格的内容,例如:
```html
<el-table-column label="表头">
<template slot-scope="scope">
<el-table :data="scope.row.subTableData" border>
<el-table-column prop="subTableColumn" label="子表头"></el-table-column>
</el-table>
</template>
</el-table-column>
```
在这个例子中,我使用了一个名为`subTableData`的属性来表示子表格的数据,并将其传递给el-table组件。你可以根据你的需求来替换这个属性名。
接下来,你可以使用CSS来控制子表格的高度,使其随着外层表格的行高度变化。你可以通过设置max-height或者height属性来控制子表格的高度,并使用calc函数来计算高度值,例如:
```css
.el-table .el-table__body-wrapper .el-table__row .el-table {
max-height: calc(100vh - 200px); /* 自定义计算方式 */
}
```
在这个例子中,我使用calc函数来计算子表格的最大高度。你可以根据你的需求来替换计算方式。
阅读全文