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

背景:

目前时间是 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,顶多可以说是一些有待完善提高的地方吧。
期待作者完善。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容