纯洁美丽。它化做雪花，用自己洁白的生躯覆盖在大地上。此时，一切都是银装素裹，一副冰清玉洁的模样。光秃秃的树枝上缀满了朵朵洁白的 "梨花 "，风一吹，花儿纷纷飘落，好似一只只银白色的蝴蝶在空中偏偏起舞。 "忽如一夜春风来，千树万树梨花开 "，这句诗不正是赞美冬天的吗？
解决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>
本文解决iview多表头动态更改列元素发生的错误的方法到此结束。学会忍耐，往往比强势更可贵。等你羽翼丰满时，再十倍地去偿还伤害你尊严的人。小编再次感谢大家对我们的支持！