解决iview \'You may have an infinite update loop in watcher with \"columns\"\'

解决方案

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

\"\"

多表头目前iview尚不能动态变化,会报错You may have an infinite update loop in watcher with \"columns\"解决方法是github大神提供的:需要修改iview.js源码

\"\"

将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   \"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>
< >
 export default {
  data() {
   return {
    columns1: [
     {
       : \'Name\',
      key: \'name\'
     },
     {
       : \'Age\',
      key: \'age\'
     },
     {
       : \'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: [{
      : \'Name\',
     align:\'center\',
     children: [{
       : \'nickName\',
      key: \'name\',
     },
      {
        : \'realName\',
       key: \'name\'
      }
     ]
    },
     {
       : \'Age\',
      key: \'age\'
     },
     {
       : \'Address\',
      key: \'address\'
     }
    ],
   }
  },
  methods: {
   onRowClick() {
    if(\'City\'!==this.columns1[this.columns1.length-1]. ) {
     this.columns1.splice(this.columns1.length, 0, {
       : \'City\',
      key: \'address\'
     })
    }
   },
   onRowClick2() {
    if(\'City\'!==this.columns12[this.columns12.length-1]. ) {
     this.columns12.splice(this.columns12.length, 0, {
       : \'City\',
      key: \'address\'
     })
    }
   }
  },
 }
</ >

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

收藏 打印