el-table for循环
时间: 2024-07-27 10:00:49 浏览: 132
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
`el-table` 是 Element UI 中的一个表格组件,它主要用于展示数据列表。如果你需要通过 `for` 循环渲染数据到表格中,可以按照以下步骤操作:
1. 首先,创建一个包含数据的数组,例如 `data`,它可能是一个对象数组,每个对象代表一行表格的数据。
```javascript
let data = [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
];
```
2. 使用 `v-for`指令遍历这个数组,并将每个数据对象作为模板的上下文 (`item`):
```html
<template>
<el-table :data="data">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<!-- 更多列... -->
<el-table-row v-for="item in data">
<el-table-cell :prop="item.name">{{ item.name }}</el-table-cell>
<el-table-cell :prop="item.age">{{ item.age }}</el-table-cell>
</el-table-row>
</el-table>
</template>
```
在这个例子中,`:prop` 属性用于指定单元格内显示数据对应的对象属性,`${}` 表达式用于动态渲染内容。
阅读全文