Cuando se abre el-dialog en el proyecto vue, se carga solo una vez y la tabla-el parpadea al cambiar de componente

<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="deleData" width="825px" :show-close="false" top="0vh" custom-class="center-dialog" :modal-append-to-body="false">

</el-dialog>

El componente montado solo se activa una vez y solo puede surtir efecto cuando se abre el cuadro de diálogo por primera vez. Debe agregar v-if="deleData"

Al cambiar componentes, el-table parpadeará y la experiencia visual es muy mala. Agregue un valor clave a el-table y márquelo como una tabla diferente para resolver el problema

//template部分

<el-table :data="tableData" class="table" :key="tableKey" :header-cell-style="{ 'background': '#F4F4F4', 'font-size': '16px','font-weight': '400', 'color': '#37474F' }" :row-style="{'color': '#688696'}" highlight-current-row>
</el-table>
script部分

data(){
  return{
      tableKey:0,
  }
}

methods:{
//切换组件时改变key值
 changeTab(n){
     if(n == 0){
        this.tableKey = 0
     }else{
        this.tableKey = 1
     }
 },
}

En segundo lugar, usar v-show al cambiar de componente también hará que la página parpadee, lo que se puede solucionar usando v-if

Supongo que te gusta

Origin blog.csdn.net/m0_65835778/article/details/128875127
Recomendado
Clasificación