el-table 一条数据差分单元格最终展示为多行
时间: 2023-10-27 13:10:16 浏览: 259
element的el-table中记录滚动条位置的示例代码
可以使用 `el-table` 的 `scoped slot` 来自定义单元格的展示方式。
首先,需要在表格中定义一个具有多行展示效果的组件,例如 `el-collapse`,它可以折叠/展开内容。
然后,在 `el-table` 中使用 `scoped slot` 来自定义单元格的展示方式。在 `scoped slot` 中,可以使用具有多行展示效果的组件来展示单元格的内容。
以下是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot-scope="{ row }">
<el-collapse>
<el-collapse-item>
<template slot="title">
{{ row.name }}
</template>
<p>{{ row.age }}</p>
<p>{{ row.address }}</p>
</el-collapse-item>
</el-collapse>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: "张三",
age: 18,
address: "北京市朝阳区"
},
{
name: "李四",
age: 20,
address: "上海市浦东新区"
}
]
};
}
};
</script>
```
在这个示例中,`el-collapse` 组件被用来实现单元格的多行展示效果。在 `el-table-column` 的 `scoped slot` 中,通过 `slot-scope="{ row }"` 来获取当前行的数据对象,然后使用 `el-collapse` 来展示多行数据。在 `el-collapse-item` 中,使用 `slot="title"` 来定义标题,这里是姓名。在 `el-collapse-item` 的内容中,展示其他需要展示的数据。
阅读全文