解决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异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
javascript实现动态标签云
Oct 16 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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(3)
2006/10/09 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php正则表达式(regar expression)
2011/09/10 PHP
php中switch语句用法详解
2015/08/17 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
python清除字符串里非数字字符的方法
2015/07/02 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
大学生期末自我鉴定
2014/02/01 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
材料员岗位职责
2015/02/10 职场文书
公司规章制度范本
2015/08/03 职场文书
企业财务管理制度范本
2015/08/04 职场文书
队列队形口号
2015/12/25 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript