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:
- 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
},
- npm ejecuta reempaquetados de compilación. Se resolvió el problema de ejecución de npm run dev.
Método dos
- 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
},
- npm ejecuta reempaquetados de compilación. Se resolvió el problema de ejecución de npm run dev.