解决iview多表头动态更改列元素发生的错误的方法


Posted in Javascript onNovember 02, 2018

解决iview 'You may have an infinite update loop in watcher with expression "columns"'

解决方案

单表头是可以动态变化不需要增添什么东西

解决iview多表头动态更改列元素发生的错误的方法

多表头目前iview尚不能动态变化,会报错You may have an infinite update loop in watcher with expression "columns"解决方法是github大神提供的:需要修改iview.js源码

解决iview多表头动态更改列元素发生的错误的方法

将iview.js中

columns: {
  handler: function handler() {
    var colsWithId = this.makeColumnsId(this.columns);
    his.allColumns = (0, _util.getAllColumns)(colsWithId);
    this.cloneColumns = this.makeColumns(colsWithId);

    this.columnRows = this.makeColumnRows(false, colsWithId);
    this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
    this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
    this.rebuildData = this.makeDataWithSortAndFilter();
    this.handleResize();
    },
   deep: true
  },

修改为

columns: {
   handler: function handler() {
     //[Fix Bug]You may have an infinite update loop in watcher with expression "columns"
     var tempClonedColumns = (0, _assist.deepCopy)(this.columns);
     var colsWithId = this.makeColumnsId(tempClonedColumns);
     //[Fix Bug End]
     this.allColumns = (0, _util.getAllColumns)(colsWithId);
     this.cloneColumns = this.makeColumns(colsWithId);

     this.columnRows = this.makeColumnRows(false, colsWithId);
     this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
     this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
     this.rebuildData = this.makeDataWithSortAndFilter();
     this.handleResize();
     },
   deep: true
   },

demo

<template>
 <div>
  单表头:
 <Table :columns="columns1" @on-row-click="onRowClick" :data="data1"></Table>
  多表头:
  <Table :columns="columns12" @on-row-click="onRowClick2" :data="data1" border height="500"></Table>
 </div>
</template>
<script>
 export default {
  data() {
   return {
    columns1: [
     {
      title: 'Name',
      key: 'name'
     },
     {
      title: 'Age',
      key: 'age'
     },
     {
      title: 'Address',
      key: 'address'
     }
    ],
    data1: [
     {
      name: 'John Brown',
      age: 18,
      address: 'New York No. 1 Lake Park',
      date: '2016-10-03'
     },
     {
      name: 'Jim Green',
      age: 24,
      address: 'London No. 1 Lake Park',
      date: '2016-10-01'
     },
     {
      name: 'Joe Black',
      age: 30,
      address: 'Sydney No. 1 Lake Park',
      date: '2016-10-02'
     },
     {
      name: 'Jon Snow',
      age: 26,
      address: 'Ottawa No. 2 Lake Park',
      date: '2016-10-04'
     }
    ],
    columns12: [{
     title: 'Name',
     align:'center',
     children: [{
      title: 'nickName',
      key: 'name',
     },
      {
       title: 'realName',
       key: 'name'
      }
     ]
    },
     {
      title: 'Age',
      key: 'age'
     },
     {
      title: 'Address',
      key: 'address'
     }
    ],
   }
  },
  methods: {
   onRowClick() {
    if('City'!==this.columns1[this.columns1.length-1].title) {
     this.columns1.splice(this.columns1.length, 0, {
      title: 'City',
      key: 'address'
     })
    }
   },
   onRowClick2() {
    if('City'!==this.columns12[this.columns12.length-1].title) {
     this.columns12.splice(this.columns12.length, 0, {
      title: 'City',
      key: 'address'
     })
    }
   }
  },
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 #Javascript
微信小程序实现留言板(Storage)
Nov 02 #Javascript
微信小程序实现留言板功能
Nov 02 #Javascript
小程序实现留言板
Nov 02 #Javascript
js中的闭包实例展示
Nov 01 #Javascript
微信小程序实现登录遮罩效果
Nov 01 #Javascript
在vue里使用codemirror遇到的问题
Nov 01 #Javascript
You might like
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
第七节 类的静态成员 [7]
2006/10/09 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
vue3.0 上手体验
2020/09/21 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
详解python深浅拷贝区别
2019/06/24 Python
python实现可变变量名方法详解
2019/07/01 Python
python numpy数组复制使用实例解析
2020/01/10 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
python中altair可视化库实例用法
2021/01/26 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
大学应届生的自我评价
2014/03/06 职场文书
初中中等生评语
2014/12/29 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
golang goroutine顺序输出方式
2021/04/29 Golang
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python