elementui 折叠面板 循环渲染多个 点击时其他关闭

的折叠面板怎么实现关闭？

可以在elementui折叠面板的属性中使用 v-for 循环渲染多个折叠面板，并给每个面板设置一个唯一标识符。然后，在点击某个折叠面板时，通过遍历全部折叠面板的方式，判断除当前被点击的折叠面板之外的其他折叠面板是否处于打开状态，若处于打开状态，则通过元素的 ref 属性调用关闭面板的方法，实现其他折叠面板的关闭。以下是示例代码：

<template>
<el-collapse v-model="activeNames" accordion>
<el-collapse-item v-for="(item, index) in items" :key="item.id" :title="item.title" :name="item.id">
<p>{{ item.content }}</p>
</el-collapse-item>
</el-collapse>
</template>

<script>
export default {
data() {
return {
activeNames: [], // 当前打开的折叠面板的唯一标识符
items: [
{ id: 1, title: '折叠面板1', content: '折叠面板1的内容' },
{ id: 2, title: '折叠面板2', content: '折叠面板2的内容' },
{ id: 3, title: '折叠面板3', content: '折叠面板3的内容' },
],
};
},
methods: {
closeOtherPanels(currentPanel) {
const panels = this.$refs.collapseItem;
for (let i = 0; i < panels.length; i++) {
if (currentPanel !== panels[i]) {
panels[i].collapse();
}
}
},
},
};
</script>

请注意，在上述代码中，我们通过在 el-collapse-item 元素上使用 ref 属性，获取了所有生成的折叠面板元素的引用。而关闭其他折叠面板的方法 closeOtherPanels()，则是在遍历所有折叠面板元素时调用的。在方法中，我们使用 if 语句判断当前循环到的折叠面板元素是否为被点击的折叠面板元素，如果不是，则调用该元素的 collapse() 方法将其关闭。