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

一渊之隔

于 2021-08-25 16:16:59 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_37263478/article/details/119913056

版权

在使用ElementUI的tabs组件时遇到问题：新增数据后，左侧列表数据未能即时刷新。解决方案是在子组件通过事件传递新增信息至父组件，父组件根据接收到的activename激活相应子组件，实现数据同步更新，而无需重新加载整个页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图，在用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=

最低0.47元/天解锁文章