vue el-tabs vue-codemirror初始隐藏,后续点击才显示

this.$refs.jsonEditor.codemirror.refresh()

<template>
  <div class="json-editor">
    <codemirror ref="jsonEditor" v-model="reqBody[codeKey]" :options="cmOptions" @ready="onCmReady" @focus="onCmFocus" @input="onCmCodeChange"></codemirror>
    <br />
    <el-button @click="formatCode">格式化</el-button>
    <el-button @click="refreshFn">刷新数据</el-button>
    <el-button @click="getData">获取数据</el-button>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
// require styles
import 'codemirror/lib/codemirror.css'
// language js
import 'codemirror/mode/css/css.js'
// theme css
import 'codemirror/theme/material.css'

export default {
  props: {
    reqBody: {
      type: Object
    },
    codeKey: {
      type: String
    }
  },
  data () {
    return {
      cmOptions: {
        tabSize: 4,
        mode: 'application/json',
        theme: 'material',
        lineNumbers: true,
        line: true,
      }
    }
  },
  components: {
    codemirror
  },
  methods: {
    onCmReady(cm) {
      console.log('ready', cm)
    },
    onCmFocus(cm) {
      console.log('focus', cm)
    },
    onCmCodeChange(newCode) {
      console.log('change', newCode)
      this.reqBody[this.codeKey] = newCode
    },
    refreshFn() {
       this.$refs.jsonEditor.codemirror.refresh()
    },
    formatCode() {
      this.codemirror.setValue((JSON.stringify(JSON.parse(this.reqBody[this.codeKey]), null, 2)))
    },
    getData() {
      console.log(this.reqBody[this.codeKey])
    }
  },
  computed: {
    codemirror() {
      return this.$refs.jsonEditor.codemirror
    }
  }
}
</script>