【折叠面板】点击ElementUI collapse 上的标题时面板不响应折叠/展开
这个问题通常是由于ElementUI的<el-collapse>
组件中的<el-collapse-item>
子组件的name
属性设置不正确导致的。每个<el-collapse-item>
都应该有一个独一无二的name
属性。
解决方法:
确保每个<el-collapse-item>
都有一个唯一的name
属性。例如:
<el-collapse v-model="activeNames">
<el-collapse-item title="标题一" name="1">
<!-- 内容 -->
</el-collapse-item>
<el-collapse-item title="标题二" name="2">
<!-- 内容 -->
</el-collapse-item>
<!-- 更多的 collapse-item -->
</el-collapse>
在Vue组件的data
中定义activeNames
:
data() {
return {
activeNames: ['1'] // 默认展开第一个面板
};
}
确保activeNames
是一个数组,即便是单个面板也要以数组形式,这样才能正确地控制面板的展开和折叠。如果name
属性不存在或者设置错误,面板将不会响应点击事件。
评论已关闭