解决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中常用的SET和GET
Jan 13 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
JavaScript 学习技巧
Feb 17 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
Vue组件系列开发之模态框
Apr 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
php常用的工具开发整理
2019/09/26 PHP
基于jquery 的一个progressbar widge
2010/10/29 Javascript
潜说js对象和数组
2011/05/25 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
利用python求相邻数的方法示例
2017/08/18 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Django CBV类的用法详解
2019/07/26 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
Python是如何进行类型转换的
2013/06/09 面试题
个人租房协议书
2014/04/09 职场文书
家庭困难证明
2014/10/12 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
教师节寄语2015
2015/03/23 职场文书
爱国主义电影观后感
2015/06/18 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
golang日志包logger的用法详解
2021/05/05 Golang