如何为element ui的el-tab-pane组件增加自定义事件?

作者站长头像
站长
· 阅读数 15

需求：一个抽像对象：person，多个具体对象: xxx_person. 内容页(/view)中有一个tab, 根据不同的xxx_person来显示不同的tab. 例: a_person的内容页(/view)有三个tab, b_person的内容页(/view)有四个tab.

现在:

    <el-tabs v-model="baseTabActiveName" type="card" @tab-click="handleClick" v-if="isReadyBuild">
      <el-tab-pane v-for="(item,index) in corpInfoStepList" 
          :id="item.names" 
          :key="index" 
          :ref="item.names" 
          :label="item.title" 
          :name="item.names" 
          @dictArgBubble="listenDictArgEnroll"
          @attaSctionBubble="listenAttaSctionEnroll" 
          @hook:mounted="childItpMounted(item.key)">
        <!-- keeplive-->
          <tab-pane :is="item.key" :ref="item.key" :type="item.key" :apply-obj.sync="localApplyInstance" :apply-id.sync="localApplyId" />
        <!-- keeplive-->
      </el-tab-pane>
    </el-tabs>

问题：希望通过:dictArgBubble来收集子标签组件的字典, attaSctionBubble来收集子标签组件的附件id, 以此来减少请求的次数。但发现: listenDictArgEnroll未被执行

回复
1个回答
avatar
test
2024-07-16

答案:

    <el-tabs v-model="baseTabActiveName" type="card" @tab-click="handleClick" v-if="isReadyBuild">
      <el-tab-pane v-for="(item,index) in corpInfoStepList" 
          :id="item.names" 
          :key="index" 
          :ref="item.names" 
          :label="item.title" 
          :name="item.names">
        <!-- keeplive-->
          <component :is="item.key" 
            :ref="item.key" 
            :type="item.key"  
            :apply-obj.sync="localApplyInstance" 
            :apply-id.sync="localApplyId" 
            @create="showCreatedTimes"
            @dictArgBubble="listenDictArgEnroll"
            @attaSctionBubble="listenAttaSctionEnroll"
            @hook:mounted="childItpMounted(item.key)" />
        <!-- keeplive-->
      </el-tab-pane>
    </el-tabs>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容