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的显示与隐藏，从而实现正确的分页功能，避免了之前的分页内容残留问题。
