Element dialog el-dialog forced rendering

In order to optimize the performance, element will not render the content in the body of the bullet box before the bullet box is opened for the first time. Generally, this setting is no problem. The content is operated, but in some special cases, there may be problems

Solution:

    <el-dialog
      title="设计配置项"
      :visible.sync="designDialogVisible"
      width="1600px"
      ref="designDialog"
    >
      <div>
        1
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="designDialogVisible = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="handleDesignDialogSubmit()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

  mounted() {
    this.$refs.designDialog.rendered = true
  }

The Model component of antd can solve this problem through the forceRender attribute

https://ant.design/components/modal-cn/