美文网首页
vxe-table fixed无效,固定列依然会滚动--解决办法

vxe-table fixed无效,固定列依然会滚动--解决办法

作者: 金鱼叔叔 | 来源:发表于2021-05-31 23:13 被阅读0次
    背景:

    目前时间是 2021-5-31,后面如果距离这个时间段比较远了,不排除作者已经修复了这个问题
    vue-table 版本: vxe-table 4.0+(Next)
    vue 版本: 3.0+

    遇到的问题

    列设置了fixed="left", 可是在滚动中,左边的列依然是会滚动

    先说原因,再说详情

    原因

    系统自动开启了虚拟滚动,我启用了span-method,二者应该是产生某些冲突了。导致fixed固定列效果失败。

    详情

    之前代码大致如下(无关紧要的代码用 *** 表示):

    <vxe-table
      :data="tableData"
      :span-method="colSpan"
      border
      show-overflow
      show-header-overflow
      max-height="100%"
    >
      <vxe-table-column field="name" :title="project.name" width="120px" fixed="left" align="left"></vxe-table-column>
      <vxe-table-column field="amuId" title="ID" width="120px" fixed="left" header-align="center" align="left"> ****** </vxe-table-column>
      <vxe-table-column title="操作" width="100px" fixed="left"> ****** </vxe-table-column>
      <vxe-table-column
        v-for="day in daysArray"
        :field="day"
        :title="day.slice(5)"
        width="60px"
      >
        <template #default="{row}">
          {{ row[day] ? row[day].p : '' }}
        </template>
      </vxe-table-column>
    </vxe-table>
    
    • 还没有横向滚动的时候,是正常的:


      X轴未滚动
    • 横向滚动一部分的时候,开始错位:


      部分X轴滚动
    • 横向滚动比较多后,固定列全部隐藏


      固定列全部隐藏了

    解决之道

    还是得仔细看文档

    • ① Console面板有一个警告信息 ▶ [vxe-table] 启用虚拟滚动后不支持该参数 "span-method"
    • ② API文档有这么一段:


      API文档摘图

      起初,我看运行没有什么问题,就习惯性忽略了①的警告信息。后来实在找不到原因,才想着去仔细阅读文档和看警告信息。这个问题搞了我一天。其实是很简单的一个原因,可是因为没有仔细看文档,结果白白浪费了不少时间。

    解决方案

    既然是虚拟滚动惹的祸,那把虚拟滚动关掉就可以了。
    关于虚拟滚动,文档有一段话是这样描述的:

    虚拟滚动(最大可以支撑 10w 列、30w 行)
    高性能的虚拟渲染,默认情况下,如果设置了 heightmax-height 则会根据触发规则自动启用虚拟渲染,触发规则由 scroll-x.gt | scroll-y.gt 设置。虚拟滚动启用后只会渲染指定范围内的可视区数据,其他的数据将被卷去收起,当滚动到可视区时才被渲染出来
    (注:启用虚拟滚动后:show-overflowshow-header-overflowshow-footer-overflow 参数将根据不同场景各自触发生效,无法取消;如果需要支持,将虚拟滚动关闭即可)

    我的代码,只需要给vxe-table添加属性来关闭虚拟滚动,就可以了。
    当然,性能方面嘛,妥协一下啦。数据少时,用户无感的
    关键属性:

      :scroll-x="{enable: false, gt: -1}"
      :scroll-y="{enable: false, gt: -1}"
    

    完整一点的代码是:

    <vxe-table
      :data="tableData"
      :scroll-x="{enable: false, gt: -1}"
      :scroll-y="{enable: false, gt: -1}"
      :span-method="colSpan"
      border
      show-overflow
      show-header-overflow
      max-height="100%"
    >
      <vxe-table-column field="name" :title="project.name" width="120px" fixed="left" align="left"></vxe-table-column>
    *** ***
    </vxe-table>
    

    至此,问题解决。拖动滚动条后,左边列能正常固定:


    正常效果

    后话

    既然这些问题,工具作者都有在文档中提到,那就不能叫Bug,顶多可以说是一些有待完善提高的地方吧。
    期待作者完善。

    相关文章

      网友评论

          本文标题:vxe-table fixed无效,固定列依然会滚动--解决办法

          本文链接:https://www.haomeiwen.com/subject/btdisltx.html