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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions