vue+elementui折叠面板

折叠面板默认点击一行都可以展开,想修改成在头部添加一个按钮或文字,点击按钮或文字展开

不支持,封装好的东西也不太好改,还不如重新写一个快

el-collapse 有个v-model 动态修改这里的值。然后slot 插入title。绑定事件@click.stop 点击哪个添加哪个反正删除。

或许 v-model 加@change 可以实现 。 点击 时 动态修改 v-model的值 。

img

该回答引用ChatGPT
请参考下面的解决方案,如果有帮助,还请点击 “采纳” 感谢支持!

可以在折叠面板的头部添加一个按钮或文字,并给这个按钮或文字绑定一个事件,在事件内部通过修改折叠面板的属性来实现展开。

<el-collapse v-model="activeName">
  <el-collapse-item title="标题一" name="1">
    <template slot="title">
      <span>标题一</span>
      <el-button style="float:right" @click="handleCollapse(1)">展开</el-button>
    </template>
    内容一
  </el-collapse-item>
  <el-collapse-item title="标题二" name="2">
    <template slot="title">
      <span>标题二</span>
      <el-button style="float:right" @click="handleCollapse(2)">展开</el-button>
    </template>
    内容二
  </el-collapse-item>
</el-collapse>

js代码

data() {
    return {
      activeName: '',
    };
  },
methods: {
    handleCollapse(name) {
      this.activeName = name;
    },
  },


不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^