Element UI&ECharts报错：TypeError: Cannot read properties of undefined (reading ‘getAttribute‘)

大鱼_小鸭

已于 2023-07-26 16:38:11 修改

阅读量2.1k

点赞数

分类专栏： Vue 文章标签： echarts 前端 javascript

于 2023-07-26 16:18:38 首次发布

本文链接：https://blog.csdn.net/weixin_43913958/article/details/131934539

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章讲述了在Vue项目中使用ElementUI的Tabs组件和Echarts图表时遇到的问题，即根据step值动态显示不同标签页。作者发现使用v-if会导致在初始化时因元素未渲染而引发错误，改为使用v-show控制显示无效，最后通过使用TabPane的disabled属性成功解决了问题，实现了根据step值控制可点击的标签页。

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

报错内容：

实现的功能：

使用Element UI的Tabs组件来实现多个Tabs标签页，其中每个标签页内放置的是不同的Echarts图表，同时还需要根据step值来判断决定展示哪些标签页

错误写法如下：

<el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
    <el-tab-pane label="Step1" name="Step1" v-if="step >= 1">
        <el-col :span="12">
          <el-card shadow="hover" style="width: 100%;height:800px;">
            <el-row id="Step11" :gutter="0">
              <el-col :span="24">
                <!--Echarts图表-->
                <div ref="Step11" style="width: 100%;height:700px;"></div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
    </el-tab-pane>
    <el-tab-pane label="Step2" name="Step2" v-if="step >= 2">Echarts图表同上</el-tab-pane>
    <el-tab-pane label="Step3" name="Step3" v-if="step >= 3">Echarts图表同上</el-tab-pane>
    <el-tab-pane label="Step4" name="Step4" v-if="step >= 4">Echarts图表同上</el-tab-pane>
    <el-tab-pane label="Step5" name="Step5" v-if="step >= 5">Echarts图表同上</el-tab-pane>
</el-tabs>

mounted() {
    this.myChartMethodStep1()
    this.myChartMethodStep2()
    this.myChartMethodStep3()
    this.myChartMethodStep4()
    this.myChartMethodStep5()
},

methods:{
    myChartMethodStep1(){
        // 初始化
        var Step11Echart = echarts.init(this.$refs.Step11)

        // 配置
        var Step11Option = {}

        Step11Echart.setOption(Step11Option)
    }，
    myChartMethodStep2(){
        // 同上
    }，
    myChartMethodStep3(){
        // 同上
    }，
    myChartMethodStep4(){
        // 同上
    }，
    myChartMethodStep5(){
        // 同上
    }，

}，

报错原因：（求助ChatGPT）

这通常意味着代码尝试访问一个未定义的变量或对象的 getAttribute 属性，最可能出现这个错误的原因是'this.$refs.Step11'是未定义的或不存在的

结合我使用的v-if，问题就找到了，当我初始step为0的时候，'this.$refs.Step11'被v-if完全移除， 'this.$refs.Step11'可能会变成undefined，那么我在myChartMethodStep1中调用到 'this.$refs.Step11'就会导致错误

那么尝试使用v-show来代替v-if，因为v-show只是控制元素的显示与隐藏，而v-if可以完全移除或添加元素，但是新的问题出现了：v-show无法控制我的标签页展示个数，即v-show无法生效，还是会默认所有标签页都展示

原因可能是：v-show在普通的HTML元素上起作用，但是对于Element UI组件，它可能不会按预期工作，因为组件可能具有自己的显示和隐藏逻辑，最后采用<el-tab-pane>组件自带的控制其显示与隐藏的disabled属性

修改后不再报错：

<el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
    <el-tab-pane label="Step1" name="Step1" :disabled="step < 1">
        <el-col :span="12">
          <el-card shadow="hover" style="width: 100%;height:800px;">
            <el-row id="Step11" :gutter="0">
              <el-col :span="24">
                <!--Echarts图表-->
                <div ref="Step11" style="width: 100%;height:700px;"></div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
    </el-tab-pane>
    <el-tab-pane label="Step2" name="Step2" :disabled="step < 2">Echarts图表同上</el-tab-pane>
    <el-tab-pane label="Step3" name="Step3" :disabled="step < 3">Echarts图表同上</el-tab-pane>
    <el-tab-pane label="Step4" name="Step4" :disabled="step < 4">Echarts图表同上</el-tab-pane>
    <el-tab-pane label="Step5" name="Step5" :disabled="step < 5">Echarts图表同上</el-tab-pane>
</el-tabs>

最终效果为：每个标签页都会展示，但是disabled会控制满足step的标签页才可以点击进去查看，比如下图：step=2时，Step1和Step2可以查看，Step3-Step5不可以查看