1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Collapse：
在你的 Vue 组件中导入 Collapse，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-collapse v-model="activeNames">
<el-collapse-item title="面板 1" name="1">
<p>这是面板 1 的内容。</p>
</el-collapse-item>
<el-collapse-item title="面板 2" name="2">
<p>这是面板 2 的内容。</p>
</el-collapse-item>
<el-collapse-item title="面板 3" name="3">
<p>这是面板 3 的内容。</p>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { ElCollapse, ElCollapseItem } from 'element-plus';
export default {
components: {
ElCollapse,
ElCollapseItem,
},
data() {
return {
activeNames: ['1'],
};
},
};
</script>
在上述代码中，我们导入了 ElCollapse 和 ElCollapseItem 组件，并在模板中使用 ElCollapse 包裹多个 ElCollapseItem 组件。每个 ElCollapseItem 组件包含一个标题和对应的内容，通过 v-model 绑定 activeNames 来控制当前展开的面板。
3. 自定义 Collapse：
你可以根据需要自定义 Collapse，例如，设置面板的图标、样式等：
<template>
<div>
<el-collapse v-model="activeNames">
<el-collapse-item title="面板 A" name="A">
<p>这是面板 A 的内容。</p>
</el-collapse-item>
<el-collapse-item title="面板 B" name="B" icon="el-icon-arrow-right">
<p>这是面板 B 的内容。</p>
</el-collapse-item>
<el-collapse-item title="面板 C" name="C" icon="el-icon-arrow-down">
<p>这是面板 C 的内容。</p>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { ElCollapse, ElCollapseItem } from 'element-plus';
export default {
components: {
ElCollapse,
ElCollapseItem,
},
data() {
return {
activeNames: ['A'],
};
},
};
</script>
在这个例子中，我们通过在 ElCollapseItem 中使用 icon 属性来设置每个面板的图标。你还可以根据需要调整其他属性和样式。
转载请注明出处：http://www.zyzy.cn/article/detail/5581/ElementPlus