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

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