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>

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

将对话框放置在表格外部可以确保只有当前页面的对话框窗口是可见的，从而解决了之前分页仍然显示的问题。

以上就是ElementUI 对话框嵌套分页表格，切换分页后旧分页仍然显示怎么办？的详细内容，更多请关注硕下网其它相关文章！