antd-vue table组件 设置 固定列 和 scroll 之后, 操作列高度与其他列高度不一致

问题一:表体各列与表头错位,表体滚动表头不动,这个要怎么处理?
官方给的解决方案,一点效果没有。

对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据,需要和 scroll.x 配合使用。

若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x。

各位大佬有没有解决方案啊?

问题一解决方案:将scroll.x设置的宽度远大于所有列的宽度之和,表头就可以滚动了。
但是,问题二:表头与表体错位了
image.png

问题二解决方案:设置如下样式可以将表头与表体对齐

 style="word-break: break-all;"

又遇到了问题三:操作列高度与其他列高度不一致

image.png
设置ellipsis不起作用。这个咋整啊。。。。。。这个组件怎么这么多事儿。。

问题三解决方案:
使用slot,将每一个表格的内容用span标签包起来,然后用a-tooltip包一下。
给span标签单行溢出隐藏的样式,当内容隐藏时,tooltip可以看到全部内容。

阅读 7.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题