18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

商城微信小程序动态_解决iview多表头动态更改列

2021-01-08分享 "> 对不起,没有下一图集了!">
解决iview多表头动态更改列元素发生的错误的方法       这篇文章主要介绍了解决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: ''
 name: 'Jim Green',
 age: 24,
 address: 'London No. 1 Lake Park',
 date: ''
 name: 'Joe Black',
 age: 30,
 address: 'Sydney No. 1 Lake Park',
 date: ''
 name: 'Jon Snow',
 age: 26,
 address: 'Ottawa No. 2 Lake Park',
 date: ''
 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 

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


"> 对不起,没有下一图集了!">
在线咨询