一 背景
我最近在做公司的bI看板。BI看板中图表有这么一个需求。
做了一个关于自定义左侧固定列的设置。就是配置比如 设置 固定列2.
table的左侧两列就固定在左侧。当图表很长的时候。这两列固定在左端。很好理解吧。
antd的table 也有对应 fix的属性。看起来风平浪静。
而我们的图表呢， 在接入时分为正常接入。和局端接入。
正常接入下。
注：图表数据都是瞎写的
二 问题
好像没什么问题。但是在局端接入的时候就会出现。如图下所示。
因为表格的单元背景色设置为带透明度的了。
为什么要这么做呢，是因为在局端下，想用后面的地图作为背景。这样看起来好看一些。
其中背景为高德地图。
综上问题总结为，在table 背景为透明色的情况。如何保证我的table 固定列的时候，不产生重叠的画面呢？
注：所谓局端就是驾驶舱。数据看板。不知道的可以搜搜。
三 方案
方案1 固定列的地方背景用纯色
但是问题是不美观的同时，透明列背景色如果有其他变化。固定列就显得很呆。。。
此处的颜色无法随背景色的变换而变换。那怎么做呢？
方案二： 基于backdrop-filter 的属性。 让背景毛玻璃的虚化。
官方文档：developer.mozilla.org/en-US/docs/...
这样的感觉。 但是我应该怎么设置这个属性呢？
我第一想法是给固定列的单元格设置这个属性。结果出问题了。
这个属性本身没什么问题，但是很消耗性能。 我的table的每一列的宽， 还有对应单元格的对齐方式都是算出来的。导致这个属性 设置了n个单元格后，该图表会频闪。
对的，你没看错。 频闪。
如果你搜索 backdrop-filter卡顿，网上也有很多demo。和文档。 里面的解决方案是让给这个dom元素开启类似gpu加速的属性。 如
transform: translateZ(0)
我试了，不生效。
四 优化方案二
看起来一切又回到起点。 backdrop-filter 频繁使用会卡。。。
直到我恰了一个汉堡。
我能不能再固定列和底部的table 之间放一个backdrop-filter层。 用它来模糊下面的属性。
我不能设置多个，我一个图表最多设置俩，减少数量是不是就解决这个问题。
这样。 我让backdrop-filter 层的大小跟固定列的宽高一样。 不就可以了么？
由于之前我的列宽就是由文本内容跟标题决定了该列的宽度。恰好省略了我的计算。 宽度问题解决了。
高度肯定不能是百分百。 因为不说有翻页器。可能最后一页就 几行数据。 你放一个100% 高度的层看起来就有问题。
那就observe dom变化。 取antd 这个高度。
js
const wrapper = ele.querySelector('.ant-table-has-fix-left') || ele.querySelector('.ant-table-has-fix-right')
if (wrapper){
const { height } = wrapper.getBoundingClientRect() ;
setFilterHeight(height) // 设置中间层的高度
}五 一个新奇的bug出现在我测试.ing.
当我部署在测试环境上的时候
哎哟我去，这咋没模糊呢？
我明明测试过了呀！
我打开控制台发现，后面的背景区。也用了这个属性。 这就导致在一个浏览器的同一个区域两个backdrop-filter叠加，导致上层的毛玻璃效果失效。
背景去掉这个属性，我的毛玻璃效果就很完美。。。。
所以。。。。。
我没啥方法了，让设计换背景图吧。。。🐶