vxe-table 弹框之中日期 和 下拉框 被遮挡

业务开发中 发现 编辑表格中的 下拉框和日期被遮挡 如下图

 

 解决方法

1、select增加下拉框z-index层架 + 官方提供的-slect 上加上-:transfer = "true"

.vxe-table--ignore-clear.vxe-select--panel {

  z-index: 9998 !important;

}

2、日期组件 给

 

 绑定事件 动态设置定位js +层级设置css

  clickTime(e) {

      this.$nextTick(() => {

        e.$panel.style.position = 'fixed'

        e.$panel.style.left = e.$event.clientX + 'px'

        e.$panel.style.top = e.$event.clientY + 'px'

        const length = this.$refs.xTable.tableFullData.length

        if (length>1) {

          // 遮挡调整样式

          if (document.documentElement.clientHeight <e.$event.clientY + 320) {

            e.$panel.style.position = 'fixed'

            e.$panel.style.left = e.$event.clientX + 'px'

            e.$panel.style.top = (e.$event.clientY - 320) + 'px'

          }

        }

      })

    },

css

.zIndexTable .vxe-input--panel-layout-wrapper {

  position:fixed!important;

  z-index: 9998 !important;

}