解决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 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
超简单的微信小程序轮播图
Nov 22 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
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
javascript事件问题
2009/09/05 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python实现的knn算法示例
2018/06/14 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
见习报告格式范文
2014/11/08 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技