pregunta:
<el-table-column label="操作">
<template slot-scope="{ row }">
<el-button type="text" v-if="row.type == 1">详情</el-button>
<el-button type="text" v-else :disabled="row.type == 3">删除</el-button>
</template>
</el-table-column>
Cuando se usa el-table, hay una columna de operación, y las operaciones en ella se procesan de acuerdo con el control v-if, y luego hay problemas de confusión de procesamiento, como corte de página o reinicio de consulta.
Análisis de causa:
Para mejorar el rendimiento de la representación, vue utiliza el mecanismo virtual dom . Si la clave no está configurada, los elementos DOM se reutilizarán al máximo, pero a veces la reutilización excesiva de elementos DOM provocará errores de representación. Intente reutilizar lo mismo elementos de nodo que ya existen sin volver a renderizar, lo que da como resultado Usar v-if no tiene el efecto deseado
Solución:
Para resolver el problema de error de renderizado causado por el dominio virtual, es establecer el valor de la clave, establecer una clave con un valor único para los elementos secundarios con el mismo elemento principal y hacer que el contenido se vuelva a renderizar.
<el-table :data="" :key="Date.now()">
También puede usar números aleatorios para establecer el valor clave Math.random()
El valor de la clave también se puede establecer en el-table-column, usar un div para ajustar el contenido del espacio, establecer el valor de la clave en el div y el contenido del espacio se puede volver a representar.