el-tabs子组件的数据同步更新问题以及新增数据返回列表页

最新推荐文章于 2024-05-01 12:51:13 发布

一渊之隔

最新推荐文章于 2024-05-01 12:51:13 发布

阅读量1.2k

点赞数

分类专栏： elementUI Vue 文章标签： elementui vue

本文链接：https://blog.csdn.net/qq_37263478/article/details/119913056

版权

如图，在用elementUI控件时，发现tab页面右边新增数据后回到左边页面配送数据没有即时刷新，需要自己手动刷新整个页面才可以重新调用接口，同时需求要求在新增数据后需要返回左侧子组件数据列表。

思考一下：tab页面刷新不需要跳转路由，与tab本身切换冲突，因为这是父子组件，不需要配置动态路由，只需在tab页面子组件配置相对应事件，在要刷新的子页面用mounted()传入当前页面的activename值，这样触发tab父组件时刷新tab父控件选中值，那么在数据操作后传递该参数便会跳转到对应页面。整理了一下解决方法：

父组件在添加goaddtab刷新属性功能以此来激活activename对应的那个子页面实现同步数据，这里的activename值可以自定义也可以写成和组件名一样为了好区分

<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="药品配送信息" name="drugDistributionList"
        ><DrugDistributionList v-if="activeName === 'drugDistributionList'" @activename=