el-table怎么用v-for动态渲染数据
时间: 2024-03-16 08:43:13 浏览: 21
使用 `el-table` 渲染数据时,可以通过 `v-for` 遍历数组,然后将数组中的每个元素渲染成表格的一行。
下面是一个简单的例子:
```
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别" prop="gender"></el-table-column>
</el-table>
```
其中,`:data="tableData"` 表示将 `tableData` 数组作为表格的数据源。
如果要通过 `v-for` 渲染数据,可以将 `tableData` 数组替换为一个包含多个对象的数组,然后在 `el-table-column` 中使用 `prop` 属性指定要渲染的属性名,例如:
```
<el-table>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别" prop="gender"></el-table-column>
<el-table-column label="操作">
<template v-for="(item, index) in tableData">
<el-button :key="index" size="mini" @click="handleEdit(index)">编辑</el-button>
</template>
</el-table-column>
</el-table>
```
在这个例子中,我们使用 `v-for` 遍历 `tableData` 数组,将每个对象渲染成表格的一行,同时在最后一列添加了一个“编辑”按钮,点击按钮时会调用 `handleEdit` 方法。