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”
中文含义:您可能在具有表达式“columns”的观察程序中有一个无限更新循环

解决方法:
方法1: 修改iview.js源码,亲测有效。(不建议)
参考链接:https://blog.csdn.net/Qi_Si_Miao_Xiang/article/details/108826950
方法2: 修改table组件代码。
参考链接:https://blog.csdn.net/fanhailing/article/details/108465412

方法一:

  1. 打开iview.js文件。( iview.js 在项目 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
},      
  1. npm run build重新打包。npm run dev运行问题解决。

方法二

  1. 打开table.vue文件。(table.vue
    在项目src\assets\iview\src\components\table\table.vue)
// 页面原代码如下:
columns: {
      handler () {
          // todo 这里有性能问题,可能是左右固定计算属性影响的
          const colsWithId = this.makeColumnsId(this.columns);
          this.allColumns = 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 () {
          // todo 这里有性能问题,可能是左右固定计算属性影响的
          // const colsWithId = this.makeColumnsId(this.columns);
          const tempClonedColumns = deepCopy(this.columns);
          const colsWithId = this.makeColumnsId(tempClonedColumns);
          this.allColumns = 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
 },
  1. npm run build重新打包。npm run dev运行问题解决。

猜你喜欢

转载自blog.csdn.net/qq_43907534/article/details/132290099