一.ElementPlus中使用el-tabs
el-tabs标签页是用来分隔内容上有关联但是属于不同类别的数据集合。Tabs组件提供了选项卡功能，默认选中第一个标签页，也可以通过value属性来指定当前选中的标签页.此外，el-tabs还提供了tab-click方法，来实现切换标签也触发的事件。下面是一个简单的示例：
<template><el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"><el-tab-pane label="User" name="first">User</el-tab-pane><el-tab-pane label="Config" name="second">Config</el-tab-pane><el-tab-pane label="Role" name="third">Role</el-tab-pane><el-tab-pane label="Task" name="fourth">Task</el-tab-pane></el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'const activeName = ref('first')const handleClick = (tab: TabsPaneContext, event: Event) => {console.log(tab, event)
}
</script>
二.解决切换el-tabs标签页时echarts不能正常显示问题:
因为在el-tabs中，一次性的把el-tabs下的所有子组件都加载出来了，这样就会使得首次没有显示的图表在显示的时候也不会正常显示；而且，在echarts挂载的dom元素有一个属性，echarts_instance，我们理解这个属性它类似于一个id，它需要每次刷新重新生成。所以在每次切换标签页的时候，就会导致echarts图表宽度高度显示不正常。
2.1在el-tab-pane中使用lazy属性：
<el-tab-pane label="数量" key="first" name="first" :lazy="true"></el-tab-pane>在el-tab-pane中设置lazy属性为true，就表示延迟渲染，这样，echarts就可以渲染出正常的高度和宽度了。
2.2使用v-if判断切换当前标签页时再渲染内容：
第一种方法我们利用的是标签页自带的lazy属性，但是我们还可以使用v-if来绑定切换标签页时再来渲染图表的事件，使用v-if方法来实现在el-tabs中只有首次显示的值为true，当点击tab切换的时候改变v-if的值，从而解决图表不能正常显示问题
<el-tabs type="border-card" @tab-click="handleTab" v-model="activeTab" style="margin-top: 10px;"><topHeader first="创建时间" :second="second" last="排序"/><el-tab-pane label="帖子列表" name="first" ><div class="chart"><myChart :data="chartData1" /></div><dataList :postLabel="postLabel" :postData="postData"></dataList></el-tab-pane><el-tab-pane label="举报审核" name="second" :key="activeTab"><div class="chart"><myChart :data="chartData2" v-if="key='activeTab'"/></div><dataList :reportLabel="reportLabel" :reportData="reportData"></dataList></el-tab-pane></el-tabs>
//当前激活的标签页
const activeTab=ref('first');
const second=ref('作者');
//切换标签页头部内容改变
const handleTab = (tab: any) => {const name = tab.props.nameif (name === 'first') {second.value = '作者';}else if (name === 'second') {second.value = '举报者';}
}这样，给v-if绑定每个标签页选项的key值，只有切换到当前标签页的时候，才会加载该图表，解决图表中不能正常显示的问题。