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 对话框嵌套分页表格，分页切换后出现闪烁问题如何解决？的详细内容，更多请关注硕下网其它相关文章！