vue项目中打开el-dialog时只加载一次，以及切换组件时el-table闪烁问题

最新推荐文章于 2024-06-06 09:55:15 发布

Lavian_

最新推荐文章于 2024-06-06 09:55:15 发布

阅读量1.6k

点赞数 1

文章标签：前端 elementui Powered by 金山文档

本文链接：https://blog.csdn.net/m0_65835778/article/details/128875127

版权

文章讨论了在Vue应用中，如何处理el-dialog组件只在首次打开时触发mounted的问题，提出了添加v-if来确保每次打开都生效。同时，针对el-table在切换时出现闪烁的现象，解决方案是给表格添加一个key属性并动态改变，以避免视觉上的不顺畅。另外，文章还提到了v-show在组件切换时可能导致的闪烁问题，推荐使用v-if来优化。

摘要由CSDN通过智能技术生成

<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>

组件的mounted只触发一次，只能在第一次点击打开对话框时生效，需要加上 v-if="deleData"

切换组件时，el-table会有闪现的情况，视觉体验很不好，给 el-table 添加一个key值，标记为不同的table即可解决

//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
     }
 },
}

其次，组件切换时使用 v-show 也会造成页面闪烁，可以使用 v-if 解决