el-collapse动态数据
时间: 2023-10-08 07:10:34 浏览: 204
el-collapse 是 Element UI 中的一个折叠面板组件,可以用来展示和隐藏内容。对于动态数据,你可以通过 v-for 指令结合 el-collapse-item 组件来动态生成折叠面板。
以下是一个示例代码,演示如何使用 el-collapse 来展示动态数据:
```html
<template>
<el-collapse v-model="activeNames">
<el-collapse-item v-for="item in itemList" :title="item.title" :name="item.name" :key="item.id">
<p>{{ item.content }}</p>
</el-collapse-item>
</el-collapse>
</template>
<script>
export default {
data() {
return {
activeNames: [], // 控制展开的面板的name数组
itemList: [
{
id: 1,
title: '面板1',
name: 'panel1',
content: '这是面板1的内容'
},
{
id: 2,
title: '面板2',
name: 'panel2',
content: '这是面板2的内容'
},
// 可以根据需要添加更多的数据项
]
};
}
};
</script>
```
在上述示例代码中,使用了 v-for 指令来遍历 itemList 数组中的数据,通过 el-collapse-item 来动态生成折叠面板。每个折叠面板都有一个标题和内容,通过绑定不同的数据来实现动态展示。activeNames 数组用来记录哪些面板是展开的。
希望这个示例能解决你的问题。如果还有其他问题,请随时提问。
阅读全文