elementui弹出框显示分页列表数据（亲测有效）

转载自&＃xff1a;https://blog.csdn.net/weixin_42579074/article/details/102973794

• 一层内嵌弹出框问题&＃xff1a;如下图&＃xff1a;弹出框在页面下面
  
• 修改前代码&＃xff1a;

<template slot-scope&＃61;"scope"><el-button type&＃61;"text" size&＃61;"small" &＃64;click&＃61;"addOrUpdateHandle(scope.row.id)">修改</el-button><el-button type&＃61;"text" size&＃61;"small" &＃64;click&＃61;"deleteHandle(scope.row.id)">删除</el-button><el-button type&＃61;"text" size&＃61;"small" &＃64;click&＃61;"stationDetailHandle(scope.row.id)">站点详情</el-button><el-dialog title&＃61;"收货地址" :visible.sync&＃61;"dialogTableVisible" ><el-table :data&＃61;"gridData"><el-table-column property&＃61;"date" label&＃61;"日期" width&＃61;"150"></el-table-column><el-table-column property&＃61;"name" label&＃61;"姓名" width&＃61;"200"></el-table-column><el-table-column property&＃61;"address" label&＃61;"地址"></el-table-column></el-table></el-dialog>
</template>


• 修改后代码&＃xff1a;在dialog中加属性 :modal-append-to-body&＃61;“false”

<template slot-scope&＃61;"scope"><el-button type&＃61;"text" size&＃61;"small" &＃64;click&＃61;"addOrUpdateHandle(scope.row.id)">修改</el-button><el-button type&＃61;"text" size&＃61;"small" &＃64;click&＃61;"deleteHandle(scope.row.id)">删除</el-button><el-button type&＃61;"text" size&＃61;"small" &＃64;click&＃61;"stationDetailHandle(scope.row.id)">站点详情</el-button><el-dialog title&＃61;"收货地址" :visible.sync&＃61;"dialogTableVisible" :modal-append-to-body&＃61;"false"><el-table :data&＃61;"gridData"><el-table-column property&＃61;"date" label&＃61;"日期" width&＃61;"150"></el-table-column><el-table-column property&＃61;"name" label&＃61;"姓名" width&＃61;"200"></el-table-column><el-table-column property&＃61;"address" label&＃61;"地址"></el-table-column></el-table></el-dialog>
</template>


• 两层dialog内嵌&＃xff0c;就是在一个弹出框中再点击一个弹出框&＃xff1a;如下图
  
• 解决办法&＃xff1a;在第一个内嵌页面的el-dialog标签中添加 append-to-body属性&＃xff0c;代码如下&＃xff1a;

<el-dialog:title&＃61;"!dataForm.id ? &＃39;新增&＃39; : &＃39;修改&＃39;":close-on-click-modal&＃61;"false":visible.sync&＃61;"visible" append-to-body><el-form :model&＃61;"dataForm" :rules&＃61;"dataRule" ref&＃61;"dataForm" &＃64;keyup.enter.native&＃61;"dataFormSubmit()" label-width&＃61;"80px"><el-form-item label&＃61;"${column.comments}" prop&＃61;"staionName"><el-input v-model&＃61;"dataForm.staionName" placeholder&＃61;"${column.comments}"></el-input></el-form-item><el-form-item label&＃61;"${column.comments}" prop&＃61;"stationTime"><el-input v-model&＃61;"dataForm.stationTime" placeholder&＃61;"${column.comments}"></el-input></el-form-item><el-form-item label&＃61;"${column.comments}" prop&＃61;"staionOrder"><el-input v-model&＃61;"dataForm.staionOrder" placeholder&＃61;"${column.comments}"></el-input></el-form-item><el-form-item label&＃61;"${column.comments}" prop&＃61;"busId"><el-input v-model&＃61;"dataForm.busId" placeholder&＃61;"${column.comments}"></el-input></el-form-item></el-form><span slot&＃61;"footer" class&＃61;"dialog-footer"><el-button &＃64;click&＃61;"visible &＃61; false">取消</el-button><el-button type&＃61;"primary" &＃64;click&＃61;"dataFormSubmit()">确定</el-button></span>
</el-dialog>