解决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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
javascript与有限状态机详解
May 08 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
javascript入门教程基础篇
Nov 16 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
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 中英文语言转换类
2011/09/07 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
一端时间轮换的广告
2006/06/26 Javascript
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
vue获取data数据改变前后的值方法
2019/11/07 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python MySQLdb使用教程详解
2018/03/20 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python中如何使用insert函数
2020/01/09 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
python 写一个文件分发小程序
2020/12/05 Python
Ajax主要包含了哪些技术
2014/06/12 面试题
英语演讲稿范文
2014/01/03 职场文书
高中军训广播稿
2014/01/14 职场文书
小学教师寄语大全
2014/04/03 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
监察建议书
2015/02/04 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
八年级语文教学反思
2016/03/03 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
Flask搭建一个API服务器的步骤
2021/05/28 Python
深入理解go slice结构
2021/09/15 Golang
SQL Server删除表中的重复数据
2022/05/25 SQL Server