elementui面板

ElementUI 面板组件

ElementUI 提供了 el-collapse 和 el-collapse-item 组件来实现面板功能，常用于折叠内容的展示。以下是具体用法和示例：

基础用法

通过 el-collapse 包裹多个 el-collapse-item，每个 el-collapse-item 代表一个面板项。默认情况下可以展开多个面板，通过 accordion 属性可设置为手风琴模式（每次只展开一个面板）。

<el-collapse v-model="activeNames">
  <el-collapse-item title="面板1" name="1">
    <div>面板1的内容</div>
  </el-collapse-item>
  <el-collapse-item title="面板2" name="2">
    <div>面板2的内容</div>
  </el-collapse-item>
</el-collapse>

<script>
export default {
  data() {
    return {
      activeNames: ['1'] // 默认展开的面板name值
    }
  }
}
</script>

手风琴模式

添加 accordion 属性后，每次只能展开一个面板。

<el-collapse v-model="activeName" accordion>
  <el-collapse-item title="面板1" name="1">
    <div>内容1</div>
  </el-collapse-item>
  <el-collapse-item title="面板2" name="2">
    <div>内容2</div>
  </el-collapse-item>
</el-collapse>

自定义标题

通过 title 插槽可以自定义面板标题区域的内容。

<el-collapse-item>
  <template slot="title">
    <i class="el-icon-info"></i> 自定义标题
  </template>
  <div>面板内容</div>
</el-collapse-item>

面板事件

el-collapse 提供了 change 事件，当展开的面板发生变化时会触发。

<el-collapse @change="handleChange">
  <!-- 面板内容 -->
</el-collapse>

<script>
export default {
  methods: {
    handleChange(activeNames) {
      console.log('当前展开的面板:', activeNames)
    }
  }
}
</script>

禁用状态

通过 disabled 属性可以禁用某个面板。

<el-collapse-item title="面板1" name="1" disabled>
  <div>禁用状态的面板</div>
</el-collapse-item>

样式定制

可以通过覆盖以下CSS类名来自定义面板样式：

• .el-collapse：整个折叠面板容器
• .el-collapse-item__header：面板标题区域
• .el-collapse-item__wrap：面板内容包裹层
• .el-collapse-item__content：面板内容区域

/* 自定义标题背景色 */
.el-collapse-item__header {
  background-color: #f5f7fa;
}

注意事项

• v-model 绑定的是当前展开面板的 name 值数组（非手风琴模式）或单个 name 值（手风琴模式）
• 面板内容可以是任意HTML元素或其他Vue组件
• 在动态生成面板时，确保每个 el-collapse-item 的 name 值是唯一的