在现有ElementUI下，子组件是不晓得本人所属的标签页是否处于开启状态的。
上面写一个Vue的指令让子组件晓得

实现

请看逐行正文。

 type TabPaneChildren = {    elPaneActivated?: () => unknown;    $children: TabPaneChildren[];  };  /**   * 调用所有子孙组件的 elPaneActivated办法   *   */  function callOnShow(instances: TabPaneChildren[]) {    //遍历子组件    instances.forEach((ins) => {        //如果以后组件有elPaneActivated办法，则调用。      ins.elPaneActivated && ins.elPaneActivated();       //对以后组件的子组件递归调用callOnShow。      if (ins.$children.length > 0) {        callOnShow(ins.$children);      }    });  }  Vue.directive("tabs-lifecycle", {    inserted(_el, _binding, vnode) {      // 获取须要增加生命周期办法的ElTabs的实例      const ins: any = vnode.componentInstance;      // 获取所有ELPane的实例      const panes: any[] = ins.$children.filter((k: any) => k.$vnode.tag?.includes("ElTabPane")) ??        [];      // 监听ElTabs的tab-click事件。详见官网文档。      ins.$on("tab-click", async () => {        // Promise.resolve()的成果等于 Vue.$nextTick();        // 这一行也可改成ins.$nextTick();        await Promise.resolve();        // 遍历ElPane实例        panes.forEach((pane) => {            // 看源码可知ElPane的active属性代表以后ElPane是否被关上了            // 从Vue devtool中也能够得悉这一点。          if (!pane.active) return;            // 从pane的实例上抛出一个激活事件。能够间接在模板中监听          pane.$emit("active");            // 调用callOnShow办法，该办法会递归pane的所有的子孙组件，并调用他们的elPaneActivated办法，如果有的话。          callOnShow([pane]);        });      });    },  });

应用

  1. 首先须要在ElTabs上应用这个指令

    <el-tabs v-tabs-lifecycle>....<el-tabs>

  2. 在某个子组件中

    elPaneActivated(){ //以后组件所属的标签被关上了}

  3. 在模板中
    监听ElTabPane的active事件即可

    <el-tabs v-tabs-lifecycle>    <el-tab-pane @active="onActive">    </el-tab-pane><el-tabs>

    完。