El uso de = provoca una excepción en el componente el-select debido a una copia superficial al asignar valores a los objetos.

1 Descripción del problema

Después de personalizar el evento, ocurrió una excepción en la pantalla. Después de imprimir, se encontró que los valores en el-selectla lista data.carLocationList cambiaron con diferentes selecciones , lo que también provocó que la pantalla fuera anormal.changeel-selectel-optionel-select

const handleSelectChange = (val: string) => {
    
    
    for (let index = 0; index < data.carLocationList.length; index++) {
    
    
        let element = data.carLocationList[index]
        if (element.carCode === val) {
    
    
            data.selectedCarLocation = element
        }
    }
}

2 causas

data.carLocationList[index]es un objeto, cuando se usa = para asignar un valor, la variable a asignar obtendrá la dirección de memoria del objeto, es decir, se realiza una copia superficial del objeto. Cuando la variable se modifica más tarde, data.carLocationList[index]el valor de también se modificará al mismo tiempo, por lo que el-selectse produce el problema de visualización anormal.

3 soluciones

Primero use JSON.stringfy()para convertir el objeto en una cadena, luego use para JSON.parse()convertir en un nuevo objeto y luego use = para asignar el nuevo objeto a la variable que se asignará.

Agregue el siguiente código antes de usar = en la declaración if:

element = JSON.parse(JSON.stringify(element))