情景:

  两个路由"/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. Javascript动态生成的页面信息爬取和openpyxl包FAQ小记

    最近,笔者在使用Requests模拟浏览器发送Post请求时,发现程序返回的html与浏览器F12观察到的略有不同,经过观察返回的response.text,cookies确认有效,因为我们可以看到返 ...

  2. VisualVM监控远程服务器JVM

    VisualVM是JDK自带的一款全能型性能监控和故障分析工具,包括对CPU使用.JVM堆内存消耗.线程.类加载的实时监控,内存dump文件分析,垃圾回收运行情况的可视化分析等,对故障排查和性能调优很 ...

  3. datetime模块处理时间

    python常用的处理时间的库有:datetime,time,calendar.datetime库包括了date(储存日期:(年.月.日),time(储存时间:(小时.分.秒和微秒),timedelt ...

  4. Mac下vim7.4+vimgdb让vim支持gdb源码调试

    下载vimgdb https://github.com/cpiger/vimgdb-for-vim7.4 下载vim7.4源码 将两个文件或者文件夹放到同一个目录解压 tar xjvf vim-7.4 ...

  5. django项目实际工作中的配置以及一些有用的小工具(持续更新)

    常用pycharm快捷键:   https://www.cnblogs.com/luolizhi/p/5610123.html   Ctrl + F1  显示错误 Ctrl + Alt + Space ...

  6. 搭建Karma+Jasmine的自动化单元测试

    最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istan ...

  7. Vue系列之 => html-webpack-plugin的两个基本作用

    安装 npm i html-webpack-plugin -D webpack.config.js const path = require('path'); //启用热更新的第二步,导入webpac ...

  8. Running ROS on Windows 10

    1.在Windows10下安装ROS.需要开启WSL.参考 2.修改ubuntu国内源,可以提高安装包下载更新速度. (1)原文件备份:sudo cp /etc/apt/sources.list /e ...

  9. nginx 阻止非自己域名解析到服务器

    server模块加入 default_server server { listen 80 default_server; return 403; # return 301 https://$serve ...

  10. (简单)华为M3揽月 BTV-W09的Usb调试模式在哪里开启的经验

    每次我们使用pc链上安卓手机的时候,如果手机没有开启Usb调试模式,pc则没办法成功识别我们的手机,有时候,我们使用的一些功能较好的app如以前我们使用的一个app引号精灵,老版本就需要开启Usb调试 ...