element表格插槽里做循环渲染数组里的对象属性元素
时间: 2024-04-30 17:22:33 浏览: 66
渲染数组某个元素 渲染数组某个元素
在Vue中,可以使用v-for指令在element表格插槽中循环渲染数组里的对象属性元素。具体实现步骤如下:
1. 在表格插槽中使用v-for指令循环渲染数组:
```html
<el-table-column prop="data" label="Data">
<template slot-scope="scope">
<div v-for="(item, index) in scope.row.data" :key="index">
{{ item }}
</div>
</template>
</el-table-column>
```
2. 在循环中获取对象属性元素,使用v-for指令循环渲染:
```html
<el-table-column prop="data" label="Data">
<template slot-scope="scope">
<div v-for="(item, index) in scope.row.data" :key="index">
<div v-if="typeof item === 'object'" v-for="(val, key) in item" :key="key">
{{ key }}: {{ val }}
</div>
<div v-else>
{{ item }}
</div>
</div>
</template>
</el-table-column>
```
注意:需要判断数组元素是否为对象,如果是对象则再次使用v-for指令循环渲染对象的属性。
阅读全文