要设置 antd 表格的列固定在右侧且可以滚动,你可以通过以下步骤来实现:

  1. 首先,确保你已经正确引入了 antd 的样式文件。

  2. 在设置列的时候,将 fixed 属性设置为 'right',如下所示:

const columns = [
  {
    title: 'Column 1',
    dataIndex: 'column1',
    key: 'column1',
  },
  {
    title: 'Column 2',
    dataIndex: 'column2',
    key: 'column2',
  },
  // 其他列...
  {
    title: 'Fixed Column',
    dataIndex: 'fixedColumn',
    key: 'fixedColumn',
    fixed: 'right', // 将 fixed 属性设置为 'right'
  },
];
  1. 然后,在表格组件中,将 scroll 属性设置为一个对象,其中包含 x 属性来定义水平滚动的宽度,如下所示:
<Table
  columns={columns}
  dataSource={data}
  scroll={{ x: 800 }} // 设置水平滚动的宽度
/>
  1. 最后,在 CSS 中设置列的宽度。你可以使用 !important 来确保样式的生效,如下所示:
.ant-table-fixed-right .ant-table-cell-ellipsis {
  width: 200px !important; // 设置列的宽度
}

请注意,.ant-table-cell-ellipsis 是 antd 表格中固定列的类名。你可以使用浏览器的开发者工具来查找并确认该类名。

希望以上解决方案对你有帮助!如果你有任何其他问题,请随时提问

antd 设置fixedright scroll用css 设置width不生效

原文地址: http://www.cveoy.top/t/topic/h9Eg 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录