当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 解决iview多表头动态更改列元素发生的错误的方法

解决iview多表头动态更改列元素发生的错误的方法

2019年05月30日  | 移动技术网IT编程  | 我要评论

占豪的投资博客,申晨老婆,济宁郑媛媛老师照片

解决iview 'you may have an infinite update loop in watcher with expression "columns"'

解决方案

单表头是可以动态变化不需要增添什么东西

多表头目前iview尚不能动态变化，会报错you may have an infinite update loop in watcher with expression "columns"解决方法是github大神提供的：需要

将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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网