naiveui的table实现可滚动的恒居中空数据处理

实现方式

~~
先放一个实现效果截图：

naive-ui table 实现空数据页面的滚动、暂无数据恒居中效果

问题详情： naive-ui的原逻辑时空数据页面只有居中的暂无数据字样，不支持横向滚动
解决方案： 既然自带的table不支持滚动，那就自己写空数据页面往里面插

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

2. 其次由于表头有快20列，并且我们使用的时固定表头，拖动下方的滚动条无法同步表头的滚动。所以在空数据div的滚动事件中我们要做好处理
   获取表头的el之后将滚动事件target解析出来把scrollleft的值赋值上
   

3. 这样拖动空数据的滚动条表头也会同步滚动了，但是还差最后一步。需要将暂无数据文案或图标进行恒居中。所以我使用的是绝对定位来实现的
   
   根据scrollbar进行left 移动50% 并减去 自身的50% 实现居中， 由于是绝对定位 所以无论滚动条如何滚动都可以实现暂无数据的居中效果了

实现代码

纯代码区域

      <n-data-table
        remote
        :render-cell="renderCell"
        :scroll-x="getTableWidth"
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :max-height="getTableMaxHeight"
        :loading="loadingRef"
        class="log-table-el"
        @update:page="handlePageChange"
      >
        <template #empty>
          <n-scrollbar x-scrollable @scroll="emptyScroll">
            <div :style="getEmptyTableTextPosition">
              <div :style="setTextPosition.value">暂无数据</div>
            </div>
          </n-scrollbar>
        </template>
      </n-data-table>
      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 暂无数据文字样式，为了达到文字永远居中使用与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,
  };
};


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35