在table单元格中 循环遍历数组的每一个对象信息 在elementUI下做
时间: 2024-05-10 20:18:31 浏览: 198
for循环遍历数组每一项元素
可以使用 element-ui 的 `<el-table>` 组件来渲染表格,然后在表格的每个单元格中使用 slot-scope 来自定义单元格的内容。
例如,假设你有一个数组 `list`,其中每个元素都包含 `name` 和 `age` 两个属性,你可以如下方式在表格中展示:
```html
<template>
<el-table :data="list">
<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>
</template>
```
这里使用了 `<el-table>` 和 `<el-table-column>` 组件来渲染表格,`list` 数组作为表格的数据源,每个列使用 `slot-scope` 来访问 `scope.row` 对象,其中 `scope.row` 表示当前行的数据对象,通过 `.name` 和 `.age` 属性访问每个对象的属性值。
你可以根据自己的需求修改表格的列数、列名和单元格内容等。
阅读全文