antd-vue-table 滚动条要怎么改好看？使用 us

先看一眼最终效果，直接化身 element-plus-table 有没有：）

操作步骤

首先给项目安装 @vueuse/core、use-scrollbars 两个包。

pnpm install @vueuse/core use-scrollbars

设置 antd-vue-table 的 scroll 属性才能开启滚动条。

antd-vue-table 需要手动设置 scroll 属性才能得到滚动条效果，所以我们用 @vueuse/core 的 useElementSize 可以用来快速获得 antd-table 的高度和宽度，这样可以更方便地设置 scroll。

<template>
  <a-table
    ref="tableRef"
    :scroll="scroll"
  />
</template>
<script setup lang="ts">
import { useElementSize } from '@vueuse/core';

const tableRef = ref();
const { width, height }  = useElementSize(tableRef);
const scroll = computed(() => ({ x: unref(width) + 200, y: unref(height) - 60 }))

设置好 antd-vue-table 的滚动条后，默认是长这样的：

这是新版 Chrome Edge 默认的滚动条样式，对比以前 Windows 浏览器默认的大条滚动条要好看很多。不过，浏览器默认的滚动条不能实现完全自定义 CSS 美化，鼠标移出隐藏移入显式等交互效果。所以这里用到 use-scrollbars 这个包将浏览器默认滚动条替换成自定义滚动条。

使用 use-scrollbars 自定义滚动条。

use-scrollbars 类似 element-plus 的 el-scrollbar 组件，能隐藏某个 div 的默认滚动条并用自定义 div 放了一个假的上去。不过，el-scrollbar 不能直接在 antd-vue-table 中使用。我们要用到 use-scrollbars 的 api，手动选中表格中显示了默认滚动条的 div 并传到 use-scrollbars 中，use-scrollbars 就能用使用 JS 自动计算出假的滚动条的高度等信息，并在界面上显示出来。

调用相关 API 需要确定两个部分：“谁高度超高了”，以及“将滚动条挂载哪里”。

谁超高了很好找。ctrl + shift + c 选中滚动条，发现 antd-vue-table 的滚动条挂在了 .ant-table-body 这个类上。也就是说 .ant-table-body 的子元素的高度超高了。

继续使用浏览器开发工具观察 HTML 结构，为了将假的滚动条挂载到 antd-vue-table 上，我们可以选择 .ant-table-wrapper 这个元素，因为他的高度和宽度正好合适。假滚动条放在上面不会被截断。

确定了这两个部分就可以调用 use-scrollbars 转换滚动条了，以下是实现的代码。

<script setup lang="ts">
const barStates = useScrollbar();
onMounted(async () => {
    barStates.init({
        // 将滚动条挂载到 .ant-table-wrapper 上
        mount: tableRef.value.$el,
        // 选中超高的子元素
        content: tableRef.value.$el.querySelector(".ant-table-body > table"),
    });
    
    // 由于 .ant-table 比 .ant-table-body 高，
    // 为了使滚动条从 .ant-table-body 开始显示，
    // 需要手动调整偏移量
    barStates.setOffset({ y: { top: 60 } });
})
</script>

<style lang="less">
.ant-table {
  &.ant-table-wrapper {
    /* 假滚动条使用绝对定位，所以手动修改一下 .ant-table-wrapper 的 position */
    position: relative;
    
    /* 隐藏掉 .ant-table-body 的默认滚动条 */
    .ant-table-body::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
}
</style>

最后来看一下挂上假滚动条后默认的效果。一般情况下默认样式看起来就不错啦，不过因为假滚动条其实就是一个 div，就算要实现各种好玩的样式或交互也是可以的哦。

完整的代码见：ant-vue-table with use-scrollbars example