naiveui的table实现可滑动的恒居中空数据运算

实现方式

~~
首先放一张效果截图：

naive-ui table 实现空数据页的滚动和暂时没有数据常量驻留的效果。

问题详情： naive-ui原始逻辑时空数据页面只有居中的单词“无数据”，不支持水平滚动。
解决方案： 因为它自带table如果不支持滚动，请编写一个空数据页并自己插入。

1. 首先用自己的页面替换手写的空数据页（组件支持空数据槽）：
   

2. 其次，因为标题很快20列，我们使用固定标题，拖动下面的滚动条以同步标题的滚动。所以在空数据中div我们应该做好滚动项目。
   获取标题el然后将滚动事件target解析它scrollleft关于
   

3. 这样，拖动空数据的滚动条标题将同步滚动，但这仍然是最后一步。没有可居住的数据副本或图标。所以我使用绝对定位来实现它。
   
   根据scrollbar进行left 移动50% 并减去 自身的50% 实现对中， 因为它是绝对定位 因此，无论滚动条如何滚动，都可以实现没有数据的居中效果。

实现代码

纯代码区域

      
        
      

// 暂时没有数据文本样式。为了实现文本始终居中scrollbar的定位
const emptyTextStyle = {
  lineHeight: 100px,
  height: 100px,
  width: 100px,
  position: absolute,
  left: 50%,
  transform: translate(-50%, 0),
};

const tableHeaderEl: any = reactive({
  value: {},
});

const setTextPosition: any = reactive({
  value: {
    ...emptyTextStyle,
  },
});

onMounted(() => {
  tableHeaderEl.value = document.getElementsByClassName(n-data-table-base-table-header)[0];
});

// naiveui暂时不支持数据范围的表滚动，因此侦听空数据div滚动条事件
// 指定事件的滚动条长度header实现了同步滚动的效果
const emptyScroll = (event: any) => {
  const { target } = event;
  tableHeaderEl.value.scrollLeft = target.scrollLeft;
  setTextPosition.value = {
    ...emptyTextStyle,
  };
};