在现有的ElementUI下，子组件并不知道自己所属的tabs是否打开。下面写一个vue指令让子组件知道实现，请看逐行注释。输入TabPaneChildren={onTabShow?:()=>未知；$children:TabPaneChildren[];};/***调用所有子孙组件的onTabShow方法**/functioncallOnShow(instances:TabPaneChildren[]){//遍历子组件instances.forEach((ins)=>{//如果当前组件有一个onTabShow方法，调用ins.onTabShow&&ins.onTabShow();//在当前组件的子组件上递归调用callOnShowif(ins.$children.length>0){callOnShow(ins.$children);}});}Vue.directive("tabs-lifecycle",{inserted(_el,_binding,vnode){//获取需要添加生命周期方法的ElTabsInstanceofconstins:any=vnode.componentInstance;//获取ELPane的所有实例constpanes:any[]=ins.$children.filter((k:any)=>k.$vnode.tag?.includes("ElTabPane"))??[];//监听tab-click事件ElTabs，详见官网文档。ins.$on("tab-click",async()=>{//Promise.resolve()的效果等于Vue.$nextTick();//这一行也可以改成ins.$nextTick();awaitPromise.resolve();//遍历ElPane实例panes.forEach((pane)=>{//查看源码可以看出ElPane的active属性代表当前ElPane是否打开//你也可以从Vuedevtool中了解到这一点。if(!pane.active)return;//从pane的实例中抛出一个激活事件。你可以直接在模板pane中监听。$emit("active");//调用callOnShow方法，这将递归pane中的所有后代组件，并调用它们的onTabShow方法，如果有的话。callOnShow([pane]);});});},});使用首先需要在ElTabs上使用这个指令
