Jeecg-Boot 前端框架ant-design-vue-jeecg 页面操作完关闭tab

最近在使用Jeecg-Boot框架,在使用前端ant-design-vue-jeecg,由于编辑页面比较复杂,弹框用起来不是很顺手,便将整个编辑页面放到一个Tab中,如图:

Jeecg-Boot 前端框架ant-design-vue-jeecg 页面操作完关闭tab

但是在点击保存完成时想关闭本Tab比较困难,经过对代码结构研究,写了一个解决方案。

tab是在TabLayout下对RouteView中,在TabLayout组建中定义方法closeTab(key);在closeTab方法中调用该组建remove(key)方法(该方法为手动点击Tab页面叉号调用的方法),在RouteView中定义方法closeRouteViewTab(key),在该方法中调用TabLayout的closeTab方法,我们自己定义的页面上使用$parent完成调用父级组建即RouteView的closeRouteViewTab方法,key传当前路由fullPath;

相关代码如下:

    1.TabLayout组建中Jeecg-Boot 前端框架ant-design-vue-jeecg 页面操作完关闭tabJeecg-Boot 前端框架ant-design-vue-jeecg 页面操作完关闭tab

    2.RouteView中Jeecg-Boot 前端框架ant-design-vue-jeecg 页面操作完关闭tab

    3.自己定义的组建调用的地方:Jeecg-Boot 前端框架ant-design-vue-jeecg 页面操作完关闭tab

自己捣鼓了一个关闭方法,记录一下。