解决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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
layui框架与SSM前后台交互的方法
Sep 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php 获取select下拉列表框的值
2010/05/08 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
python每隔N秒运行指定函数的方法
2015/03/16 Python
Saltstack快速入门简单汇总
2016/03/01 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
parser.add_argument中的action使用
2020/04/20 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
机关单位动员会主持词
2014/03/20 职场文书
班主任寄语大全
2014/04/04 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang