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

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

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