After the fixed column is set in the table, the mouse scrolls on the non-fixed column, and the fixed column and the non-fixed column are not synchronized.

[ChunGui-MengLiRen]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.7.3

Environment

windows10 chrome 91.0.4472.77 vue2.6.11

Reproduction link

https://yt25q.csb.app/

Steps to reproduce

<template>
<a-table :columns="columns"
:data-source="data"
:pagination="pagination"
:scroll="{ x: 1500, y: 300 }">
<a slot="action">action</a>
</a-table>
</template>
<script>
const columns = [
{
title: 'Full Name',
width: 100,
dataIndex: 'name',
key: 'name',
fixed: 'left'
},
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
{ title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
{ title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
{ title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
scopedSlots: { customRender: 'action' }
}
]

const data = []
for (let i = 0; i < 100; i  ) {
data.push({
key: i,
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`
})
}

export default {
data() {
return {
data,
columns,
pagination: {
pageSizeOptions: ['10', '20', '30', '50', '100'], //每一页可选显示条数
pageSize: 50, // 每一页条数
total: 0, //总条数
showTotal: (total) => `共 ${total} 条`, //显示总条数
showSizeChanger: true
}
}
}
}
</script>

What is expected?

固定列和非固定列同步滚动

What is actually happening?

滚动不同步,固定列和非固定列滚动不同步

[tangjinzhou]

留一列非固定列不设置宽度

[ChunGui-MengLiRen]

留一列非固定列不设置宽度

确实已经留了,使用的是官方示例的代码,但还是有些问题?是我哪里用的不对吗?请赐教

[ChunGui-MengLiRen]

留一列非固定列不设置宽度

当表格显示的数据条数越多时,滚动不同步越明显

[ChunGui-MengLiRen]

留一列非固定列不设置宽度

<template>
  <a-table :columns="columns"
           :data-source="data"
           :pagination="pagination"
           :scroll="{ x: 1500, y: 300 }">
    <a slot="action">action</a>
  </a-table>
</template>
<script>
const columns = [
  {
    title: 'Full Name',
    width: 100,
    dataIndex: 'name',
    key: 'name',
    fixed: 'left'
  },
  { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
  { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
  { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
  { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
  { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
  { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
  { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
  { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
  {
    title: 'Action',
    key: 'operation',
    fixed: 'right',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]

const data = []
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`
  })
}

export default {
  data() {
    return {
      data,
      columns,
      pagination: {
        pageSizeOptions: ['10', '20', '30', '50', '100'], //每一页可选显示条数
        pageSize: 100, // 每一页条数
        total: 46, //总条数
        showTotal: (total) => `共 ${total} 条`, //显示总条数
        showSizeChanger: true
      }
    }
  }
}
</script>

给最后一列非固定列不设置宽度还是不行,数据条数多时滚动不同越明显

[ChunGui-MengLiRen]

留一列非固定列不设置宽度

https://img-ask.csdnimg.cn/upload/1623475404454.gif
这是演示的gif

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.