Bootstrap

解决el-tabs下首次加载页面echarts图例显示不完全

解决办法

1.绑定@tab-click="handleClick" 事件,通过点击到对应的页签,调用ref里面的显示隐藏,通过v-if实现。具体代码

html

            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="基本信息" name="first">
              </el-tab-pane>
              <el-tab-pane label="经营信息" name="second">
                <business @openvisible="openvisible" ref="business" 
             :clientInfo="clientInfo"></business>
              </el-tab-pane>
              <el-tab-pane label="企业动态" name="third">
              </el-tab-pane>
              <el-tab-pane label="服务信息" name="fourth">
              </el-tab-pane>
            </el-tabs>

method

通过修改定义的隐藏展示实现无感刷新图例

  handleClick(tab, event) {
      switch (parseInt(tab.index)) {
        case 1:
          this.$refs.business.showzxt = !this.$refs.business.showzxt
          this.$nextTick(() => {
            this.$refs.business.showzxt = !this.$refs.business.showzxt
          })
          break
      }
    },

组件内部变量

     data里定义 showzxt: true


     <!-- 企业年报表格 -->
      <div class="yearNews-tablezx" v-if="showzxt">
        <div class="yearNews-tablezx-zxt"><zxtone></zxtone></div>
        <div class="yearNews-tablezx-zxt"><zxttwo></zxttwo></div>
        <div class="yearNews-tablezx-zxt"><zxtthree></zxtthree></div>
      </div>

;