el-table [{ name:"张三",details:[{detail:"11111"},{detail:"11111"}] }]这个数据如何两行展示
时间: 2023-07-02 22:08:05 浏览: 87
你可以使用 `row-span` 属性来合并行,具体操作如下:
```html
<template>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="name" label="姓名" :row-span="2"></el-table-column>
<el-table-column prop="details" label="详情">
<template slot-scope="scope">
<el-table :data="scope.row.details" border>
<el-table-column prop="detail" label="详细信息"></el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: "张三",
details: [
{ detail: "11111" },
{ detail: "11111" }
]
}
]
};
}
};
</script>
```
在 `el-table-column` 上设置 `row-span="2"`,表示该列占两行。然后在 `el-table` 上使用嵌套,将 `details` 列作为子表格展示出来。这样就能实现展示数据的两行效果。
阅读全文