antd-vue-table 滚动条要怎么改好看？使用 use-scrollbar 美化滚动条实操记录
先看一眼最终效果，直接化身 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，就算要实现各种好玩的样式或交互也是可以的哦。