vue2使用elementUI的el-tabs中有多个echarts变形解决方法

本文链接：https://blog.csdn.net/m0_73854403/article/details/131391149

在Vue.js中，利用el-tabs组件和v-model、v-show指令实现懒加载功能，只有当tabs页被选中时，才会渲染Echarts图表并发送请求执行相关代码。这种方法减少了初始加载时的资源消耗，提高了用户体验。

摘要由CSDN通过智能技术生成

在tabs标签中使用懒加载只有选中当前的tabs页, 才会渲染echarts ,再发送请求, 执行该tabs内部代码逻辑; 另外使用v-show进行判断,对其他tabs进行隐藏. 当然其他方法也有 , 不过个人推荐这一种方法 , 比较简单使用, 另外对初始加载也会友好一些, 因为使用到了懒加载

   <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="单一品种全国平均价" name="one" lazy>
          <span
            slot="label"
            :class="activeName === 'one' ? 'active tab-span' : 'tab-span hover'"
          >
            单一品种全国平均价
          </span>
          <one-son v-show="activeName === 'one'"></one-son>
        </el-tab-pane>

        <el-tab-pane label="单一品种地区平均价" name="two" lazy>
          <span
            slot="label"
            :class="activeName === 'two' ? 'active tab-span' : 'tab-span hover'"
          >
            单一品种地区平均价
          </span>
          <two-son v-show="activeName === 'two'"></two-son>
        </el-tab-pane>
        <el-tab-pane label="单一市场多品种对比" name="three" lazy>
          <span
            slot="label"
            :class="
              activeName === 'three' ? 'active tab-span' : 'tab-span hover'
            "
          >
            单一市场多品种对比
          </span>
          <three-son v-show="activeName === 'three'"></three-son>
        </el-tab-pane>
        <el-tab-pane label="单一品种多市场对比" name="four" lazy>
          <span
            slot="label"
            :class="
              activeName === 'four' ? 'active tab-span' : 'tab-span hover'
            "
          >
            单一品种多市场对比
          </span>
          <four-son v-show="activeName === 'four'"></four-son>
        </el-tab-pane>
        <el-tab-pane label="百家重点市场对比" name="five" lazy>
          <span
            slot="label"
            :class="
              activeName === 'five' ? 'active tab-span' : 'tab-span hover'
            "
          >
            百家重点市场对比
          </span>
          <five-son v-show="activeName === 'five'"> </five-son>
        </el-tab-pane>
      </el-tabs>