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

将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多表头动态更改列元素发生的错误的方法”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!