如何利用vue和Element-plus实现标签页和折叠效果

npm install element-plus --save
// 或
yarn add element-plus

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">
      Content of Tab Pane 1
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      Content of Tab Pane 2
    </el-tab-pane>
    <el-tab-pane label="Tab 3" name="tab3">
      Content of Tab Pane 3
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { ElTabs, ElTabPane } from 'element-plus';

export default {
  components: {
    ElTabs,
    ElTabPane
  },
  data() {
    return {
      activeTab: 'tab1'
    };
  }
};
</script>

<template>
  <el-collapse v-model="activePanel">
    <el-collapse-item title="Panel 1" name="panel1">
      Content of panel 1
    </el-collapse-item>
    <el-collapse-item title="Panel 2" name="panel2">
      Content of panel 2
    </el-collapse-item>
    <el-collapse-item title="Panel 3" name="panel3">
      Content of panel 3
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import { ElCollapse, ElCollapseItem } from 'element-plus';

export default {
  components: {
    ElCollapse,
    ElCollapseItem
  },
  data() {
    return {
      activePanel: ['panel1']
    };
  }
};
</script>