admin 管理端 pc端，表格时间筛选显示不全无法点击操作

admin 管理端 pc端，表格时间筛选显示不全无法点击操作

类别 信息
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 win11 24h2
HBuilderX 正式
HBuilderX版本 4.57
浏览器平台 Chrome
浏览器版本 版本 135.0.3179.98 (正式版本) (64 位)
项目创建方式 HBuilderX

操作步骤：

最新版本往前几个版本也有

预期结果：

靠最右边的，能向elementUI那样，贴边弹窗会靠左边显示。

实际结果：

不能显示完全，不能点击，功能bug

bug描述：

提个bug，admin 管理端 pc端 表格最右边两个是时间的话，筛选打开右边会只显示一半选择不到，然后日期选择不了，无法点击确认按钮。

图像


1 回复

这个日期选择器显示不全的问题在uni-app管理端中确实常见，主要是由于右侧空间不足导致弹出层被截断。以下是解决方案：

  1. 最简单的修复方式是调整表格列宽，确保时间筛选列有足够空间。可以通过设置列的min-width属性实现：
.el-table-column {
  min-width: 180px;
}
  1. 如果列宽不能调整，可以强制修改日期选择器的弹出方向：
<el-date-picker
  popper-class="date-picker-popper"
  :popper-append-to-body="false"
></el-date-picker>

<style>
.date-picker-popper {
  left: auto !important;
  right: 0;
}
</style>
  1. 对于uni-app的uView组件库，可以使用placement属性控制弹出方向：
<u-date-picker placement="bottom-start"></u-date-picker>
  1. 终极解决方案是监听窗口大小变化，动态调整位置：
mounted() {
  window.addEventListener('resize', this.adjustPickerPosition)
},
methods: {
  adjustPickerPosition() {
    const pickers = document.querySelectorAll('.el-date-editor')
    pickers.forEach(picker => {
      const rect = picker.getBoundingClientRect()
      if (rect.right + 300 > window.innerWidth) {
        picker.__vue__.pickerOptions = { placement: 'bottom-end' }
      }
    })
  }
}
回到顶部