ElementUI 对话框嵌套分页表格，分页切换后出现闪烁问题如何解决？

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《ElementUI 对话框嵌套分页表格，分页切换后出现闪烁问题如何解决？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

elementui 对话框嵌套分页表格中的分页闪烁问题

问题描述

在 elementui 中，将一个表格嵌套在对话框中，并且表格使用分页功能。切换到下一页后，之前的页面仍作为背景显示。

解决方案

将对话框移到表格外部，如下所示：

模板

<template>
  <el-table>
    <el-table-column label="权限信息" prop="permission">
      <template slot-scope="scope">
        <el-button size="mini" slot="reference" @click="openpermissiondialog(scope.row.id)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="角色权限信息" :visible.sync="permissiondialogue" width="40%" @closed="closedpermissiondialog">
    <permissiontable :roleid="permissionroleid"></permissiontable>
  </el-dialog>
</template>

脚本

data() {
  return {
      ...,
      permissionRoleId: null,
  }
},
methods: {
  openPermissionDialog(id) {
    this.permissionRoleId = id;
    this.permissionDialogue = true;
  },
  closedPermissionDialog() {
    this.permissionRoleId = null;
  },
},

原因

将对话框写在表格列中，相当于在每行创建一个独立的对话框。当切换分页时，只有最上层的对话框会更新，而其他对话框仍然保持之前的状态，从而导致之前的分页显示为背景。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《ElementUI 对话框嵌套分页表格，分页切换后出现闪烁问题如何解决？》文章吧，也可关注golang学习网公众号了解相关技术文章。