ElementUI对话框嵌套分页表格分页失效：如何解决弹窗内分页表格数据残留问题？-css教程-PHP中文网

ElementUI对话框嵌套分页表格分页失效：如何解决弹窗内分页表格数据残留问题？

聖光之護

发布： 2025-03-15 09:48:21

原创

575人浏览过

elementui对话框嵌套分页表格分页显示问题详解

在使用elementui开发过程中，常常会遇到在对话框（el-dialog）中嵌套表格（el-table）并进行分页（el-pagination）的情况。然而，如果处理不当，切换分页后，之前的分页内容仍然显示，影响用户体验。本文将详细分析这个问题，并提供解决方案。

问题描述：

开发者在el-dialog中嵌套了el-table，并使用el-pagination实现分页功能。后端提供分页查询接口，每次切换分页索引时，都会调用接口重新获取数据。然而，切换到下一页后，之前的页面内容仍然保留，如同背景板一样显示。这主要是因为代码结构导致的弹窗重复渲染问题。

原始代码结构将el-dialog嵌套在el-table-column中，如下所示：

<el-table-column label="权限信息" prop="permission">
  <template slot-scope="scope">
    <el-dialog title="角色权限信息" :visible.sync="permissiondialogue" width="40%">
      <permissiontable :roleid="scope.row.id"></permissiontable>
    </el-dialog>
    <el-button size="mini" slot="reference" @click="permissiondialogue = true">查看</el-button>
  </template>
</el-table-column>

登录后复制

这种写法导致每行数据都对应一个el-dialog实例，点击“查看”按钮时，会同时渲染多个对话框，每个对话框都包含一个分页表格。因此，切换其中一个对话框的分页，其他对话框的分页内容不会发生变化。

解决方案：

为了解决这个问题，需要将el-dialog从el-table-column中移出，使其成为表格外部的一个独立组件。通过控制el-dialog的visible属性和传递roleid参数来实现弹窗的显示和数据更新。修改后的代码如下：

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

登录后复制

相应的javascript代码需要做如下修改：

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

登录后复制

通过这种修改，只有一个el-dialog实例，每次点击“查看”按钮，都会更新permissionroleid并控制permissiondialogue的显示与隐藏，从而实现正确的分页功能，避免了之前的分页内容残留问题。

以上就是ElementUI对话框嵌套分页表格分页失效：如何解决弹窗内分页表格数据残留问题？的详细内容，更多请关注php中文网其它相关文章！