在vue3项目中使用el-tabs切换标签页时echarts图表显示不正确

一.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.name
    if (name === 'first') {
        second.value = '作者';
    }
    else if (name === 'second') {
        second.value = '举报者';
    }
}

这样，给v-if绑定每个标签页选项的key值，只有切换到当前标签页的时候，才会加载该图表，解决图表中不能正常显示的问题。