El front-end resuelve varias situaciones de "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'xxx')

Descripción del problema: la consola informa un error "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'xxx')"

Ejemplo: TypeError: no se pueden leer las propiedades de undefined (leyendo '$el') en eval

Análisis de causa y solución.

Situación 1:
el motivo de este error es que algunos atributos de las llaves no están definidos. Probablemente porque escribiste el nombre de atributo incorrecto

Situación 2:
Al solicitar datos de forma asíncrona, dado que los datos se obtienen de forma asíncrona, no hay ningún atributo de datos al principio, y este error también se informará en este caso. Por ejemplo, tengo una tabla de datosData aquí y el valor inicial es un objeto vacío. No reportaremos un error cuando usamos { {tableData.detail}}, pero si usamos { {tableData.detail.name}}, reportaremos un error. ¿Por qué?
Debido a que tableData.detail ya no está definido, definitivamente informará un error para undefined.name.
Entonces, en la inicialización, al atributo de detalle se le asigna un objeto vacío.

Caso tres:

Los datos devueltos por el backend no tienen este atributo o algunos de los datos devueltos tienen datos y algunos son nulos

En este momento, primero debe verificar, puede agregar v-if para juzgar

Situación 4:

Al usar $nextTick, al actualizar la tabla, la tabla no tiene un atributo personalizado, o el atributo personalizado está mal referenciado (porque el método se copia del ready-made, he estado buscando durante mucho tiempo, pit!)

<template>
// 起初没有定义ref="multipleTable"
 <el-table ref="multipleTable" :data="tableData" style="width: 100%" :header-cell-style="{ 
  background: '#f5f7fa' }">

 </el-table>
</template>

 methods: {
       getData() {
        let params = {
          ...this.queryFrom
        }
        params.pageNo = params.pageNo.toString()
        params.pageSize = params.pageSize.toString()
         getSettlementOrder(params).then(res => {
          this.tableData = res.result.data || []
           // 在数据更新后执行刷新表格
           this.$nextTick(() => {
            // myTable是表格的ref属性值
            if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
              this.$refs.multipleTable.doLayout();
            }
          })
          this.total = res.result.total || 0
          this.tabHeight = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 170;
        })
      },