Puede tener un bucle de actualización infinito en el observador con la expresión "columnas".

Escenario: iview carga dinámicamente el encabezado de la tabla secundaria

Pregunta:
Es posible que tenga un bucle de actualización infinito en el observador con la expresión "columnas".
Significado chino: puede tener un bucle de actualización infinito en el observador con la expresión "columnas".

Solución:
Método 1: Modifique el código fuente de iview.js y la prueba personal será efectiva. (No recomendado)
Enlace de referencia: https://blog.csdn.net/Qi_Si_Miao_Xiang/article/details/108826950
Método 2: Modificar el código del componente de la tabla.
Enlace de referencia: https://blog.csdn.net/fanhailing/article/details/108465412

método uno:

  1. Abra el archivo iview.js. (iview.js en el proyecto 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 ejecuta reempaquetados de compilación. Se resolvió el problema de ejecución de npm run dev.

Método dos

  1. Abra el archivo table.vue. (table.vue
    está en el proyecto 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 ejecuta reempaquetados de compilación. Se resolvió el problema de ejecución de npm run dev.

Supongo que te gusta

Origin blog.csdn.net/qq_43907534/article/details/132290099
Recomendado
Clasificación