解决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 相关文章推荐
jquery中动态效果小结
Dec 16 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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
php 模拟POST|GET操作实现代码
2010/07/20 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
javascript 内存回收机制理解
2011/01/17 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
vue兄弟组件传递数据的实例
2018/09/06 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
python中property和setter装饰器用法
2019/12/19 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
django实现模型字段动态choice的操作
2020/04/01 Python
详解Python中namedtuple的使用
2020/04/27 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
初中高效课堂实施方案
2014/02/26 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
员工手册董事长致辞
2015/07/29 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS