情景:

  两个路由"/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. jQuery动画方法

    下面介绍一些使用jQuery实现动画的方法: html中有如下代码: <button id="btn-box1">show</button> <but ...

  2. JavaScript 当前URL取参返回字典

    getParam : function(){ return (key, strURL = window.location.search) => new RegExp("(^|\\?|& ...

  3. vector创建二位数组

    默认初始化vector vector<vevtor<int> > arr(row, vector<int>(col, 0)); //指定行大小为row,列为col, ...

  4. python,day3,函数基础-3

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数基本语法及特性 函数是什么? 函数一词 ...

  5. idea用到的快捷键

    之前一直用的eclipse,早就听说idea更智能,更便捷,于是,下载了idea,然后再破解,现在就慢慢抛弃eclipse,平时就用idea进行编码. idea的快捷键与eclipse还是有较大不同, ...

  6. mySQL的行转列

    因为MYSQL里边没有  PIVOT      现记录:   原表格:   mysql语句: SELECT MAX(CASE WHEN corol='红' THEN NUM else 0 END) A ...

  7. 2018-2019-2 网络对抗技术 20165335 Exp4 恶意代码分析

    实验内容: 一.使用schtacks进行系统运行监控,使用sysmon工具监控系统的具体进程,使用各种工具进行监控,并针对软件的启动回连,安装到目标机,以及其他的控制行为的分析,同时,对主机的注册表, ...

  8. v-charts简介

    一, v-charts简介 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2.0 和 echarts 封 ...

  9. 1.4:SubShader

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 在了解了渲染流水线之后,我们可以开始SubShader的学习了. 什么是S ...

  10. semaphore demo !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

    import 'dart:async'; import 'package:semaphore/semaphore.dart'; import 'dart:io'; import 'dart:conve ...