解决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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
js实现模拟购物商城案例
May 18 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
通过文字传递创建的图形按钮
2006/10/09 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
详解jQuery事件
2017/01/13 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
js里面的变量范围分享
2020/07/18 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Python实现一个优先级队列的方法
2020/07/31 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
员工2014年度工作总结
2014/12/09 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Python软件包安装的三种常见方法
2022/07/07 Python