关于同一组件第二个数据不更新

最新推荐文章于 2024-06-04 21:41:16 发布

风兮梧桐

最新推荐文章于 2024-06-04 21:41:16 发布

阅读量202

点赞数

分类专栏： VUE 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_51263829/article/details/126828003

版权

VUE 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

    <el-tabs
      v-model="activeName"
      type="border-card"
      @tab-click="paneClick"
    >
      <el-tab-pane
        label="部门年度计划"
        name="dept"
      >
        <YearInspectPlanTable
          ref="yearInspectPlanTable"
          :active-name="activeName"
          :page-info.sync="pageInfo"
          :search-form="searchForm"
        />
      </el-tab-pane>
      <el-tab-pane
        label="全部年度计划"
        name="all"
      >
        <YearInspectPlanTable
          ref="yearInspectPlanTable"
          :active-tab="activeName"
          :page-info.sync="pageInfo"
          :search-form="searchForm"
        />
      </el-tab-pane>
    </el-tabs>

第一个组件中数据不更新，第二个更新，但是前一个的数据和后一个数据都完成了，后来发现是由于ref名字相同所导致的ref只会对后一个进行执行。

    <el-tabs
      v-model="activeName"
      type="border-card"
      @tab-click="paneClick"
    >
      <el-tab-pane
        label="部门年度计划"
        name="dept"
      >
        <YearInspectPlanTable
          v-if="activeName==='dept'?true:false"
          ref="yearInspectPlanTable"
          :active-name="activeName"
          :page-info.sync="pageInfo"
          :search-form="searchForm"
        />
      </el-tab-pane>
      <el-tab-pane
        label="全部年度计划"
        name="all"
      >
        <YearInspectPlanTable
          v-if="activeName==='all'?true:false"
          ref="yearInspectPlanTable"
          :active-tab="activeName"
          :page-info.sync="pageInfo"
          :search-form="searchForm"
        />
      </el-tab-pane>
    </el-tabs>

如图所示就好用了