vue 组件复用不刷新

• Z时代
• 2024-01-10
• 分类：综合

情景:

　　两个路由"/a", "/b"公用一个页面组件, 在"/a"路由中, 第一列是序号, 在"/b"路由中, 第一列是多选框.

问题: 

　以下代码在切换时, 从"/a"跳转到 "/b", 依旧显示是序号.

      <!-- 多选框 -->
      <el-table-column
        v-if="pageType == 'a'"
        type="selection"
        width="55">
      </el-table-column>

<!-- 序号 -->
      <el-table-column
        v-else
        type="index"
        label="序号"
        width="50">
      </el-table-column>        

解决方法: 给两个组件各加一个不同的key

      <el-table-column
        v-if="pageType == 'a'"
        key="a-selection"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        v-else
        key="b-index"
        type="index"
        label="序号"
        width="50">
      </el-table-column>      

以上是 vue 组件复用不刷新 的全部内容， 来源链接： utcz.com/z/380496.html