情景:

  两个路由"/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. JS全选反选功能

    总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...

  2. win 下 python ImportError: No module named requests

    第一次弄爬虫,报库找不到,网上找了半天,一般都让都让改成绝对路径...那不是饮鸩止渴嘛. 然后 在无意中发现,不需要控制台输入pip命令,因为不是在Linux下啊,,win下直接在pycharm里添加 ...

  3. nuxt 2

    原文出处: 

  4. 前端多选插件bootstrap-select的使用

    一.分别引入bootstrap-select.min.js和bootstrap-select.min.css文件 二.在页面中写一个class为selectpicker的select控件 <se ...

  5. 一道有趣的JS问题

    function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = function () { al ...

  6. iOS深浅拷贝

    浅拷贝:你和你的影子,你改变,你的影子发生改变 深拷贝:你的克隆人,你改变,你的克隆人并不会发生变化 eg: NSString *string = @"我是一个小白鼠"; NSSt ...

  7. (转)MERGE语法详解

    merge语法是根据源表对目标表进行匹配查询,匹配成功时更新,不成功时插入. 其基本语法规则是 merge into 目标表 a using 源表 b on(a.条件字段1=b.条件字段1 and a ...

  8. RocketMQ基本概念

    RocketMQ基本概念 一.生产者 生产者发送业务系统产生的消息给broker.RocketMQ提供了多种发送方式:同步的.异步的.单向的. 1.1 生产者组 具有相同角色的生产者被分到一组.假如原 ...

  9. sitecore 获取item的URL

    给出一个简单的sitecore项: Item item; 该项目本身不包含它的网址.要获取项目的URL,您需要调用static类Sitecore.Links.LinkManager string ur ...

  10. A Simple Nim (SG打表找规律)

    题意:有n堆石子,每次可以将其中一堆分为数量不为0的3堆,或者从其中一堆中拿走若干个,最终拿完的那个人赢. 思路:直接暴力SG状态,然后找出其中的规律,异或一下每一堆的状态就可以了. #include ...