Skip to content

table 开启虚拟滚动时, 滚动条样式问题 #8277

@zuihou

Description

@zuihou
  • [ - ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.6

Environment

winow 11 google 版本 137.0.7151.104

Reproduction link

http://fast-crud.docmirror.cn/antdv4/#/crud/basis/layout-card

Steps to reproduce

当表格的数据很少时,右侧的滚动条样式不对。

  1. 在window11 google 或者 edge 浏览器上是这个效果
  • google 版本 137.0.7151.104
  • edge 版本 138.0.3351.83 (正式版本) (64 位)
Image
  1. 在mac google 或者 edge 浏览器上这个效果
  • google 版本 138.0.7204.101
  • edge 版本 138.0.3351.83 (正式版本) (arm64)
Image

期望:
在window google edge 浏览器上,能正常显示滚动条的样式。

复现代码:

import { onMounted , ref} from 'vue';
import { Table } from 'ant-design-vue';

import type { TableColumnsType } from 'ant-design-vue';

<script setup>

const columns = ref<TableColumnsType>([
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Borrow',
dataIndex: 'borrow',
},
{
title: 'Repayment',
dataIndex: 'repayment',
},
]);


let  data = [...Array(100)].map((_, i) => ({
key: i,
name: `Edward King ${i}`,
borrow: 32,
repayment: `London, Park Lane no. ${i}`,
}));
</script>

<template>
<div class="p-2 m-2" style="background: #ffffff;">
<Table :columns="columns" :data-source="data"
:pagination="{ pageSize: 3 }" :scroll="{ y: 400 }" bordered   ></Table>
</div>
</template>

What is expected?

在window google edge 浏览器上,能正常显示滚动条的样式。

What is actually happening?

实际上就是 在window 和 mac 上,开启虚拟滚动后,样式不一致

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions