vue iview 动态加载分组表头，页面卡死解决办法（亲测有效）

感谢您的阅读，希望能帮助到您，若对内容有疑义或建议的，欢迎指正~笔者打字不易，需要转载的请指明出处哦

本文链接：https://blog.csdn.net/qi_si_miao_xiang/article/details/108826950

1、问题描述
当vue iview页面使用动态加载分组表头时，打开页面会直接卡死。

2、解决办法
将node_modules\iview\dist\iview.js 文件打开，找到下面的代码：

columns: {
            handler: function handler() {
                var colsWithId = this.makeColumnsId(this.columns);
                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
        },

替换为：

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
        },

然后再次打包即可。亲测有效。