首页 > 其他分享 >Ant Design Vue 中的tab组件中,获取不到$ref

Ant Design Vue 中的tab组件中,获取不到$ref

时间:2023-09-20 17:13:07浏览次数:43  
标签:Vue bpm Ant Design tab 组件 ref

问题:在tab的组件中引入了一个组件,在页面渲染时,需要用到子组件bpmnModeler 里面的方法,调用this.$ref.bpm的时候报错了,找不到bpm

<a-tab-pane key="3" tab="流程图" >
          <div class="search">
            <a-card>
              <a-row style="position: relative">
                <bpmnModeler ref="bpm" :xml="xmlData" :is-view="true"></bpmnModeler>
              </a-row>
            </a-card>
          </div>
</a-tab-pane>

原因: <a-tab-pane> 在官方的api中,forceRender的值默认是false,所以tab被隐藏时是获取不到$ref的,所以设置成true就可以了

<a-tab-pane key="3" tab="流程图" forceRender>

 

标签:Vue,bpm,Ant,Design,tab,组件,ref
From: https://www.cnblogs.com/sen-hf/p/17717797.html

相关文章

  • vue-day05
    补充1.图片在接口中返回一些数据和图片地址,而不是图片的二进制内容{code:100,msg:'成功',img:地址}2.md5不是加密,摘要算法动态组件<component:is="who"></component>component标签的is属性等于组件名字,这里就会显示这个组件HTML<!DOCTYPEhtml><html......
  • Vue-cli创建项目
    1.单页面应用:spa-以后Vue的项目就只有一个:XX.html页面-当定义了很多组件,不可能都写在:XX.html中吧2.单文件组件:xx.vue-https://v2.cn.vuejs.org/v2/guide/single-file-components.html-一个组件一个文件一个组件中有的东西-1.html内容:以后html都放在te......
  • Vue的DatePicker日期选择器
    picker-option属性官网描述是这样的 1.disabledDate一般我们使用picker-option都是通过disabledDate参数,来设置其日期选择区间,代码如下:<el-col:span="12"><el-form-itemlabel="开票日期起"prop="rqq"><el-date-pickert......
  • 我不知道的vue3
    代替Vue.delete  vue3中可以使用deleteobj.xxx 就可以实现去删除obj的xxx属性!!!    第二种:借助于del  import{del}from'vue'del(obj,propertyName) 也可删除属性!!!   每个vue页面因为scoped这个属性的原因,可以使得不同vue页面间的css......
  • Vue动态组件、插槽、vue项目
    一、动态组件1、动态组件#<component:is="who"></component>#component标签的is属性等于组件名字,这里就会显示这个组件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title>......
  • HBuilder打包简单项目(vue项目)APP的教材
    1.官网下载最新的Hbuilderx。2.准备好一个包含manifest.json的Vue项目,这时会生成manifest.json文件,打开进行详细设置,如图标、描述等详情设置,设置完成后,保存。3.首先去AppUploader找到开发证书(开发类型是带development的),点击P12下载到桌面。4.然后根据里面的BundleID新建一个描述......
  • 框架分析(3)-Vue.js
    (框架分析(3)-Vue.js)专栏介绍link主要对目前市面上常见的框架进行分析和总结,希望有兴趣的小伙伴们可以看一下,会持续更新的。希望各位可以监督我,我们一起学习进步。Vue.jsVue.js是一种用于构建用户界面的渐进式JavaScript框架。它是一个轻量级的框架,通过将视图层和状态层进行绑......
  • Vue js 3.0下 箭头函数的使用
    ......
  • vue项目-封装树形控件公用组件
    vue项目中,如h5端,第三方的树形选择器无法满足项目开发时,原生封装tree控件,通过判断是否存在子节点,循环递归组件完成树形封装,通过vue指令实现跨级传递数据或方法封装树形组件如下:1<template>2<divclass="tree-select-page">3<divclass="tree-item"v-for="item......
  • vue-动态组件、插槽
    动态组件方法一:笨方法-切换组件:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="js/vue.js"></script></head><body>......