【折叠面板】点击ElementUI collapse 上的标题时面板不响应折叠/展开
warning:
这篇文章距离上次修改已过432天,其中的内容可能已经有所变动。
这个问题通常是由于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属性不存在或者设置错误,面板将不会响应点击事件。
评论已关闭