element before-remove的使用

在 Element UI 中，`el-collapse-item` 支持 `before-leave` 事件，在折叠面板收起前触发。可以通过在这个事件中执行一些逻辑来控制面板是否可以被收起。

具体使用方法如下：

1. 在 `el-collapse-item` 组件上绑定 `before-leave` 事件，例如 `@before-leave="beforeLeave"`。

2. 在事件处理函数 `beforeLeave` 中，判断当前收起状态，如果满足条件，返回 `false` 阻止收起；否则返回 `true` 允许收起。

下面是一个示例代码：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="折叠面板 1" name="1" @before-leave="beforeLeave">
      <p>这里是折叠面板 1 的内容</p>
    </el-collapse-item>
    <el-collapse-item title="折叠面板 2" name="2">
      <p>这里是折叠面板 2 的内容</p>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1']
    }
  },
  methods: {
    beforeLeave(to, from, next) {
      if (this.activeNames.includes('1')) {
        next(false); // 阻止收起折叠面板
      } else {
        next(); // 允许收起折叠面板
      }
    }
  }
}
</script>

在上面的示例代码中，我们可以看到：

1. 使用 `el-collapse` 组件和 `el-collapse-item` 组件创建折叠面板。

2. 在 `el-collapse-item` 组件上绑定 `@before-leave` 事件，并在事件处理函数 `beforeLeave` 中实现逻辑。如果折叠面板 1 处于激活状态，阻止收起；否则允许收起。

通过使用 `before-leave` 事件，可以在折叠面板收起前执行一些逻辑，从而更好地控制折叠面板的行为。