el-dialog 定位在浏览器底部

使用el-dialog嵌套打开一个组件（表格）

<el-dialog class="page1" title="样点属性" :visible.sync="showDialog1" :modal="false" :close-on-click-modal="false" width="1200px">
              <PointData1/>
            </el-dialog>

如何修改样式使得其固定悬浮在浏览器如下图位置

固定定位或者绝对定位

用vue3的话可以这样做

<div style="position: fixed;bottom: 0;width:100%;" id="bottom-slot"></div>
  <teleport to="#bottom-slot">
    <el-dialog :modal="true" v-model="dialogTableVisible">
      <h1>test dialog</h1>
    </el-dialog>
  </teleport>

setup(){
....
    const dialogTableVisible = ref(true);
    return {dialogTableVisible}
....
}

<style scoped>
::v-deep .el-overlay{
  position:relative;
}
</style>

<el-dialog style="position:fixed;bottom: 0;" class="page1" title="样点属性" :visible.sync="showDialog1" :modal="false" :close-on-click-modal="false" width="1200px">
              <PointData1/>
            </el-dialog>