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

解决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>

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