el-table行里嵌套循环
时间: 2024-02-29 07:50:19 浏览: 150
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
在Element UI中,el-table是一个非常常用的表格组件,可以用于展示数据。如果你想在el-table的行里嵌套循环,可以使用el-table-column的slot-scope属性来实现。
首先,你需要在el-table中定义el-table-column,并设置slot-scope属性为一个变量,例如item。然后,在el-table-column的template中,你可以使用v-for指令来循环遍历需要嵌套的数据。
下面是一个示例代码:
```html
<el-table :data="tableData">
<el-table-column label="姓名">
<template slot-scope="scope">
<span v-for="name in scope.row.names">{{ name }}</span>
</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
{{ scope.row.age }}
</template>
</el-table-column>
</el-table>
```
在上面的代码中,tableData是一个包含多个对象的数组,每个对象有一个names属性和一个age属性。在第一个el-table-column中,我们使用v-for指令来循环遍历scope.row.names,并将每个name显示出来。在第二个el-table-column中,我们直接显示scope.row.age。
这样,你就可以在el-table的行里嵌套循环了。
阅读全文