element
element copied to clipboard
ElemeFE
el-pagination 全屏以后:page-sizes="[20,40,60,80,100]"点击无反应
<div id="fullScreen"> <br><br> <el-form ref="form" :model="form" inline> <el-form-item prop="searchParam"> <el-input v-model="form.searchParam" placeholder="请输入需要查询的字符"> <el-button slot="append" icon="el-icon-search" @click="onSearch" @keyup.enter.native="onSearch" /> </el-input> </el-form-item> <el-form-item> <el-button type="warning" size="medium" @click="resetForm" >重置 </el-button> </el-form-item> <el-form-item style="float: right"> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="handleFullscreen" /> </el-form-item> </el-form> <el-table ref="singleTable" key="singleTable" resizable="true" :show-header="tableColumn.length>0" border :max-height="tableData.length>=20?650:''" :data="tableData.slice((pageNum-1)*pageSize,pageNum*pageSize)" style="width: 100%" :row-style="{height: '0'}" :cell-style="{padding: '0'}" > <el-table-column label="序号" width="50" align="center"> <template slot-scope="scope"> <span>{{ scope.$index + (pageNum - 1) * pageSize + 1 }}</span> </template> </el-table-column> <el-table-column v-for="(item, index) in tableColumn" :key="index" :prop="item.field" :label="item.label" :width="item.width" align="center" header-align="center" :show-overflow-tooltip="true" > <template #header> <el-popover placement="bottom" trigger="click" :append-to-body="fullscreenFlag" @show="showPopover(item.field)" > <div slot="reference" class="search-header"> <span class="search-title">{{ item.label }}</span> <i class="search-icon el-icon-search" /> </div> <el-input :ref="'sInput'+item.field" v-model="form[item.field]" style="z-index: 10000" @blur="handleTableInfo" @keyup.enter.native="handleTableInfo" /> </el-popover> </template> <template slot-scope="scope"> <div v-if="checkArray(scope.row[item.field])"> <img :src="JSON.parse(scope.row[item.field])[0].url" :alt="JSON.parse(scope.row[item.field])[0].name" style="width: 100px;height: 30px" @click="showImg(JSON.parse(scope.row[item.field])[0])"> </div> <div v-else> {{ scope.row[item.field] }} </div> </template> </el-table-column> <el-table-column label="操作" min-width="90" align="center" > <template slot-scope="scope"> <el-button type="text" size="small" @click="jumpClassifyDrawing(scope.row)">图纸</el-button> <el-button type="text" size="small" @click="jumpClassifyDetail(scope.row)">详情</el-button> </template> </el-table-column> </el-table> <br> <el-pagination :page-size="pageSize" :current-page="pageNum" :page-sizes="[20,40,60,80,100]" layout="total,sizes, prev, pager, next" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" /> </div>
handleFullscreen() {
if (this.isFullscreen) {
this.exitFullScreen()
} else {
this.enterFullScreen()
}
this.fullscreenFlag = !this.fullscreenFlag
this.isFullscreen = !this.isFullscreen
},
// 控制全屏
enterFullScreen() { // 进入全屏
const docElm = document.getElementById('fullScreen')
if (docElm.requestFullscreen) {
docElm.requestFullscreen()
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen()
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen()
}
},
// 退出全屏
exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
},
简化了你提供的代码，仅保留全屏功能和分页组件，复现了该问题。定位原因在于切换分页大小的弹出层元素在body中而不是在全屏元素fullScreen 中,所以造成了显示异常
复现demo: https://codepen.io/coderEDC/pen/GRxvwdY
对应源码位置如下
经测试在这里添加:popper-append-to-body="false"指定弹出层元素不插入至 body 元素，可以正常显示，效果如下
目前
Pagination组件未提供相应Attributes修改这块，我提个pr吧😄好的,谢谢
想问一下题主，这个问题现在解决了吗？我也遇到这个问题了，怎么都搞不定，唉，希望回复
仓库看起来是没有维护了，你应该只能从源码上处理了 源码怎么处理呀？ 源码修改内容 https://github.com/ElemeFE/element/pull/22032 ,
pagination使用时添加属性:popper-append-to-body="false"
仓库看起来是没有维护了，你应该只能从源码上处理了 源码怎么处理呀？ 源码修改内容 #22032 ,
pagination使用时添加属性:popper-append-to-body="false"直接改源码，那要把源码下到本地作为依赖？有没有其他的解决方案呀
仓库看起来是没有维护了，你应该只能从源码上处理了 源码怎么处理呀？ 源码修改内容 #22032 ,
pagination使用时添加属性:popper-append-to-body="false"我们是准备把分页组件用select重写一下
看你们自己的处理方式，我建议是采用给源码打补丁的方式，工作量小 https://github.com/ds300/patch-package
怎么给源码打补丁呢？大哥
也可以尝试使用vue里面的extends属性，继承pagination组件后重写里面的方法，大概是这样
<script>
import Vue from 'vue';
import { Pagination } from 'element-ui';
export default Vue.extend({
extends: Pagination,
mounted() {
// you code...
},
});
</script>
参考https://github.com/ElemeFE/element/issues/17686这里的讨论, 在官方合并PR之前, 最佳的解决方案可能是@jawn-ha这位仁兄提到的: 还是针对body进行全屏, 但给真正需要全屏的元素加一个class, 比如screenfull-element(样式参考下方), 退出全屏后再去掉这个class, 这样一来, el-popover, el-tooltip, el-datepicker, el-pagination (pager)等全屏兼容问题都解决了。
.screenfull-element { width: 100vw; height: 100vh; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2019; }
其实增加类似 popper-append-to-body 属性指标不治本，最好还是判断如果是 appendToBody，然后把浮窗追加到全屏容器下面比较好，后续我提交一下我修改的源码。
