el-table中el-table-column嵌套el-table如何然子table得告诉随外层table 行得高度变化
时间: 2023-11-08 08:02:47 浏览: 197
在el-table中,如果子表格(el-table)的高度随着外层表格的行高变化,你可以使用作用域插槽(scope slot)来实现。
首先,在el-table-column的定义中,添加一个作用域插槽,用来传递当前行的数据给子表格。例如:
```html
<el-table-column label="子表格" width="200">
<template slot-scope="scope">
<!-- 子表格内容 -->
<el-table :data="scope.row.subTableData" :row-height="getSubTableHeight(scope.row)">
<!-- 子表格的列定义 -->
<el-table-column prop="column1" label="列1"></el-table-column>
<el-table-column prop="column2" label="列2"></el-table-column>
</el-table>
</template>
</el-table-column>
```
然后,你需要定义一个方法 `getSubTableHeight` 来计算子表格的高度。在这个方法中,你可以根据外层表格的行高来动态计算子表格的高度。例如:
```javascript
methods: {
getSubTableHeight(row) {
// 根据外层表格的行高和子表格的行数来计算子表格的高度
return row.subTableData.length * this.rowHeight;
}
}
```
这样,子表格的高度就会随着外层表格的行高变化而改变。
阅读全文