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

最新推荐文章于 2024-05-15 16:34:47 发布

AzeShinja

最新推荐文章于 2024-05-15 16:34:47 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/AzeShinja/article/details/126699148

版权

Vue 同时被 3 个专栏收录

55 篇文章 3 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

naive-ui

1 篇文章 1 订阅

订阅专栏

实现方式

~~
先放一个实现效果截图：
请添加图片描述
naive-ui table 实现空数据页面的滚动、暂无数据恒居中效果

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

首先将自己手写的空数据页面替换自带的页面（组件支持空数据插槽）：
其次由于表头有快20列，并且我们使用的时固定表头，拖动下方的滚动条无法同步表头的滚动。所以在空数据div的滚动事件中我们要做好处理
获取表头的el之后将滚动事件target解析出来把scrollleft的值赋值上
这样拖动空数据的滚动条表头也会同步滚动了，但是还差最后一步。需要将暂无数据文案或图标进行恒居中。所以我使用的是绝对定位来实现的

根据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>

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