el-table-column中渲染的操作里面放表格
时间: 2023-10-24 10:36:29 浏览: 63
如果你要在 `el-table-column` 中渲染一个表格,可以使用 `scoped slot`,将子表格作为子组件传递给 `scoped slot` 进行渲染。
以下是示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column label="Sub Table">
<template slot-scope="scope">
<el-table :data="scope.row.subTableData">
<el-table-column prop="subName" label="Sub Name"></el-table-column>
<el-table-column prop="subAge" label="Sub Age"></el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'John',
age: 30,
subTableData: [
{
subName: 'John Jr.',
subAge: 5
},
{
subName: 'Jane',
subAge: 2
}
]
},
{
name: 'Mary',
age: 25,
subTableData: [
{
subName: 'Bob',
subAge: 6
},
{
subName: 'Alice',
subAge: 3
}
]
}
]
}
}
}
</script>
```
在这个示例中,我们在第三列中使用 `scoped slot` 渲染了一个子表格,同时在 `slot-scope` 中可以访问到当前行的数据 `scope.row`,进而可以获取到该行数据的子表格数据,并将其传递给子组件 `el-table` 进行渲染。
阅读全文