情景:

  两个路由"/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 组件复用不刷新的更多相关文章

  1. vue 组件复用 - component

    vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...

  2. Vue 组件复用性和slot

    1.组件可复用 2.slot元素作为组件模板之中的内容分发插槽,元素自身可以被替换 <!DOCTYPE html> <html lang="en"> < ...

  3. vue 组件的强制刷新

    组件 <vue-component v-if="hackReset"></vue-component> <button @click="a& ...

  4. vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应 ...

  5. vue组件重新加载(刷新)

    vue组件重新加载(刷新) 第一种方法:利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if=& ...

  6. 一个简单的适用于Vue的下拉刷新,触底加载组件

    一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...

  7. Vue.js 组件复用和扩展之道

    软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...

  8. Vue 组件与复用

    (1)全局注册 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="U ...

  9. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

随机推荐

  1. GIT回滚master分支到指定tag版本

    master版本上线以后一般要打一个tag备份,以防事态有变,这是一个好习惯,如果以后有问题也可以放心的回滚版本,那么怎么用tag版本覆盖mastaer呢,其实只有几个命令 1.查看分支 git br ...

  2. ORA-27104: system-defined limits for shared memory was misconfigured与Linux内核参数配置有关的案例

    ```[oracle@WWJD01 ~]$ sqlplus / as sysdba SQL*Plus: Release 12.2.0.1.0 Production on Fri Sep 21 15:1 ...

  3. Nuxt 自动化部署及打包后文件自动上传七牛云

    1.安装七牛云 2.在项目根目录新建 upload.js 3.上传凭证 4.上传配置,详情参考七牛云文档 5.在 package.js中修改项目build完成执行upload文件命令 7. nuxt. ...

  4. List、Set、Map集合

    1 List接口 我们掌握了Collection接口的使用后,再来看看Collection接口中的子类,他们都具备那些特性呢? 接下来,我们一起学习Collection中的常用几个子类(List集合. ...

  5. Elasticsearch.安装(单节点)

    Elasticsearch.安装(单节点) 环境Linux 7.x jdk 1.8 elasticsearch 5.x 环境目录结构(根目录多了两个文件夹): /resources    /** 存放 ...

  6. log4net 写入 mongodb+Mongodb记录日志

    项目里面需要记录大量的日志,为了方便分析,也是为了方便开发人员远程查询日志,可以把日志写入MongoDB. 1.先上Log4net配置 <?xml version="1.0" ...

  7. 配置php环境的一个nginx.conf

    文件:nginx.conf 内容: #user  nobody;worker_processes  1; #error_log  logs/error.log;#error_log  logs/err ...

  8. 媒体查询@media 屏幕适配

    @media(max-width: 1199px){.banner{height: 400px;}}1.6倍@media(min-width: 1200px) and (max-width: 1365 ...

  9. 前端好用js库

    1.pubsub-js: PubSubJS is a topic-based publish/subscribe library written in JavaScript. 评价:做发布订阅超级简单 ...

  10. Python数据分析Pandas库之熊猫(10分钟一)

    pandas熊猫10分钟教程 排序 df.sort_index(axis=0/1,ascending=False/True) df.sort_values(by='列名') import numpy ...