elementui面板
ElementUI 面板组件
ElementUI 提供了 el-collapse 和 el-collapse-item 组件来实现面板（折叠面板）功能。以下是如何使用这些组件的详细说明：
安装 ElementUI 确保项目已安装 ElementUI。可以通过 npm 或 yarn 安装：
npm install element-ui
# 或
yarn add element-ui引入 ElementUI
在项目的入口文件（如 main.js）中引入 ElementUI：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);基本面板用法
使用 el-collapse 包裹多个 el-collapse-item 来创建折叠面板：
<template>
<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>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'] // 默认展开的面板
};
}
};
</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>自定义标题
可以通过插槽自定义面板标题：
<el-collapse-item name="1">
<template slot="title">
<i class="el-icon-info"></i> 自定义标题
</template>
<div>面板内容</div>
</el-collapse-item>动态面板
可以通过 v-for 动态生成面板：
<el-collapse v-model="activeNames">
<el-collapse-item
v-for="item in panels"
:key="item.name"
:title="item.title"
:name="item.name">
<div>{{ item.content }}</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeNames: ['1'],
panels: [
{ title: '面板 1', name: '1', content: '内容 1' },
{ title: '面板 2', name: '2', content: '内容 2' }
]
};
}
};
</script>面板事件
el-collapse 提供了 change 事件，可以在面板状态变化时触发：
<el-collapse v-model="activeNames" @change="handleChange">
<!-- 面板内容 -->
</el-collapse>
<script>
export default {
methods: {
handleChange(activeNames) {
console.log('当前展开的面板:', activeNames);
}
}
};
</script>样式调整
可以通过覆盖默认样式来自定义面板外观：
/* 修改面板标题背景色 */
.el-collapse-item__header {
background-color: #f5f7fa;
}
/* 修改面板内容内边距 */
.el-collapse-item__content {
padding: 20px;
}通过以上方法，可以灵活使用 ElementUI 的面板组件实现各种折叠面板需求。
