首先，确保你已经引入了 Element-React 的样式和脚本。可以通过以下方式之一来引入：
1. 使用 CDN：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 使用 npm 安装：
npm install element-ui
然后在你的 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-ui';
export default {
data() {
return {
activeNames: ['1'],
};
},
components: {
ElCollapse,
ElCollapseItem,
},
};
</script>
在上面的例子中，我们使用了 ElCollapse 和 ElCollapseItem 组件来创建折叠面板。通过在 el-collapse 中使用 el-collapse-item 来定义每个折叠项的标题和内容，可以在每个折叠项中放置需要折叠的内容。
通过 v-model 属性可以控制当前激活的折叠项，这里使用了 activeNames 来绑定当前激活的项。在示例中，默认展开了第一个折叠项。
你可以根据实际需求，调整折叠面板的样式、内容和配置项。
转载请注明出处：http://www.zyzy.cn/article/detail/5638/Element-React