解决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 URL参数读取改进版
Jan 16 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
node.js通过url读取文件
Oct 16 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
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
Python操作SQLite简明教程
2014/07/10 Python
Python线程的两种编程方式
2015/04/14 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python爬取微信公众号文章
2018/08/31 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
大三自我鉴定范文
2013/10/05 职场文书
供货协议书范本
2014/04/22 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python