解决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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
javascript定义函数的方法
Dec 06 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
微信小程序 form组件详解
Oct 25 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
将Vue组件库更换为按需加载的方法步骤
May 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
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
对pandas中Series的map函数详解
2018/07/25 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
python 19个值得学习的编程技巧
2020/08/15 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
物控部经理职务说明书
2014/02/25 职场文书
创新型城市实施方案
2014/03/06 职场文书
学校个人对照检查材料
2014/08/26 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
如何理解PHP核心特性命名空间
2021/05/28 PHP
Python必备技巧之函数的使用详解
2022/04/04 Python