element-plus [Component] [table-v2] 虚拟表格在:fixed="false"时,设置columns的minWidth属性,数据超出横向滚动条不显示

am46iovg  于 7个月前  发布在  其他
关注(0)|答案(3)|浏览(66)

Bug Type: Component

Environment

  • Vue Version: 3.3.2
  • Element Plus Version: 2.3.7
  • Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0
  • Build Tool: Vite

Reproduction

  • el-table-v2

Element Plus Playground

Steps to reproduce

设置fixed="false",再给columns添加minWidth属性

What is Expected?

自适应到最小值后固定每一列的宽度。

What is actually happening?

横向数据超出没有滚动条

Additional comments

(empty)

jtw3ybtb

jtw3ybtb1#

可以参考我做的首先css样式添加如下

:deep(.el-table-v2) {
    .el-table-v2__body > div:first-child {
       overflow: auto !important;
    }
    .el-table-v2__header {
       width: 100% !important;
    }
    .el-table-v2__row {
       width: fit-content !important;
       min-width: 100%;
    }
}

ts添加

// todo 添加对el-table-v2__body横向滚动的监听同步滚动el-table-v2__header
  onMounted(() => {
    const { x } = useScroll(
      ref<HTMLElement | null>(
        document.querySelector('.el-table-v2__body > div:first-child')
      ),
      {
        onScroll: () => {
          document.querySelector('.el-table-v2__header')?.scrollTo({
            left: x.value
          })
        }
      }
    )
  })
kd3sttzy

kd3sttzy2#

一开始我也使用样式穿透改变滑动条,但是横向滑动条体验不是很好,很难滑动。刚试了你的方法是一样的,而且能看见两个滑动条重叠。是因为他的组件内部有自己定义的滑动条及方法,只是没有触发。

mwkjh3gx

mwkjh3gx3#

这个问题根本原因是没设置width 。
必须设置column的width 但fixed=false时 设置的width又无效,我觉得设计不合理

相关问题