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

本文介绍: TypeError: Canno t read properties of undefine d (read in g ‘getAt tribu te’)

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

<el-tabs type="border-card" @tab-click="handleClick" v-model="activeName"&gt;
    <el-tab-pane label="Step1" name="Step1" v-if="step &gt;= 1"&gt;
        <el-col :span="12"&gt;
          <el-card shadow="hover" style="width: 100%;height:800px;"&gt;
            <el-row id="Step11" :gutter="0"&gt;
              <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>