解决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中的一些注意事项 更新中
Dec 06 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
详解angular部署到iis出现404解决方案
Aug 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
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
php实例化一个类的具体方法
2019/09/19 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
javascript折半查找详解
2015/01/26 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
Python编程之多态用法实例详解
2015/05/19 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python实现三次样条插值
2018/12/17 Python
python实现弹窗祝福效果
2019/04/07 Python
Ratchet 模态框的实现
2020/08/19 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
安全检查验收制度
2014/01/12 职场文书
中年人生感言
2014/02/04 职场文书
师德建设实施方案
2014/03/21 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
单位工资证明范本
2015/06/12 职场文书
请病假条范文
2015/08/17 职场文书