element-plus里tabs点击如何更新内容？

  • Z时代
  • 2024-02-20
  • 分类：IT

tabs的pane是动态组件
父组件里这么调用子组件
====== 父组件 =======

<el-tabs v-model="curTab" type="border-card">
<el-tab-pane v-for="(item, index) in tabNames" :key="index" :label="item.label" :name="item.name" lazy>
  <component :is="item.name" :detail="detail" :id="id" />
</el-tab-pane>
</el-tabs>
tabNames() {
      return [
        { label: "详细资料", name: "BaseInfo" },
        { label: "操作记录", name: "RelativeHandle" }
      ];
    },

====== 子组件 =======
在vue2和element ui里，子组件里监听rootTabs的名称变换，更新当前页面的内容，如下使用

inject: ["rootTabs"],
watch: {
    "rootTabs.currentName"(val) {
      if (val === "BaseInfo") {
          this.initData();
       }
    }
  },

vue3+element-plus里如何使用？

回答：

element-plus里没有rootTabs这个inject了，所以自己在父组件inject一个即可
参考
https://cn.vuejs.org/guide/components/provide-inject.html#inject

1、设置
app.config.unwrapInjectedRef = true
vue3.3不需要

2、父类里provide

provide() {
    return {
      myTab: computed(() => this.curTab)
    }
  },

3、子类里

watch: {
    "myTab"(val) {
      if (val === "BaseInfo") {
          this.initData();
       }
    }
  },

可以解决

以上是 element-plus里tabs点击如何更新内容？ 的全部内容， 来源链接： utcz.com/p/933902.html

回到顶部