table uses scroll bug #4576
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
1.7.7
Environment
ant-design-vue1.7.7 vue2.6.10
Reproduction link
Steps to reproduce
<template>
<a-card :bordered="false">
<a-table
bordered
:columns="columns"
:row-key="(record, index) => index"
:data-source="data"
:scroll="{ x: 700 }"
></a-table>
</a-card>
</template>
<script>
export default {
data() {
return {
data: [
{
no: 1,
name: "张扣扣",
job: "产品经理",
hobby: "唱歌、跳舞、打球",
school: "平台大学",
professional: "天文物理学",
company: "物理研究院",
},
],
columns: [
{ title: "序号", fixed: "left", with: 90, dataIndex: "no" },
{ title: "名称", fixed: "left", with: 108, dataIndex: "name" },
{ title: "职业", dataIndex: "job", with: 120 },
{ title: "爱好", dataIndex: "hobby" },
{ title: "毕业院校", dataIndex: "school" },
{ title: "专业", dataIndex: "professional", with: 200 },
{ title: "单位", fixed: "right", dataIndex: "company" },
],
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
</style>What is expected?
消除空白列，去掉遮挡。各列宽度根据设定宽度适配
What is actually happening?
table使用scroll属性，会有空白列，如果左右都有固定，会出现要么左边空白列，要么右边被遮挡，无法调整到合适位置。如果使用scroll为true，Safari和ie会失效，没有滚动条。另，我发现不管我怎么设置宽度，各列宽度始终相等，设置无效