el-table prop是数组如何让表格多行展示数组里面的数据
时间: 2024-01-21 09:18:27 浏览: 155
el-table树形表格表单验证(列表生成序号)
如果 `el-table` 中的 `prop` 是一个数组,需要使用 `scoped slot` 来展示数组中的数据。可以使用 `v-for` 循环来遍历数组,然后在 `scoped slot` 中将每个元素渲染成一行数据。
举个例子,假设 `prop` 是一个包含对象的数组,每个对象有 `name` 和 `age` 两个属性,那么可以这样写:
```html
<el-table :data="tableData">
<el-table-column label="姓名">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">{{ scope.row.age }}</template>
</el-table-column>
</el-table>
```
在这个例子中,`tableData` 是一个包含对象的数组,每个对象有 `name` 和 `age` 两个属性。使用 `v-for` 循环遍历数组中的每个元素,然后在 `scoped slot` 中将每个元素渲染成一行数据。在 `scoped slot` 中,可以通过 `scope.row` 访问到当前行的数据。
阅读全文