Antd Table组件列宽的一些疑惑

前言

前些年参与的几个项目，前端部分主要采用Vue+ElementUI进行开发。最近参与的项目，前端部分大胆的转向了React+Antd。

疑惑

在之前的Vue+ElementUI项目里，Table组件列的列宽（各个列的列宽和）如果超过Table容器宽度，则会自动出现横向滚动条。另外Table组件列的列宽如果达不到Table容器宽度，Table组件的右侧则会留空，不显示任何内容。可以参考Demo复现：https://codesandbox.io/s/elementui-table-column-width-20220314-12secw
而Antd中的Table组件，列宽的渲染方式似乎和ElementUI有点不太一样。在Antd中，不管Table组件列的列宽有没有超过Table容器的宽度，各个列实际渲染的时候，都是按照当前列的列宽占所有列的列宽的拜访比宽度进行渲染的，比如总共有三列A、B、C，宽度分别是50px、50px、100px，A、B、C三列实际渲染宽度分别是25%、25%、50%，并不是期望的50px、50px、100px。刚接触Antd的我，对于这种方式有点百思不得其解。
附上Antd版的Demo地址：https://codesandbox.io/s/antd-table-column-width-20220314-jx7cli?file=/src/MyTable.js

解决方案

1. 对于Table组件列宽小于Table容器宽度，希望是在Table组件右侧进行留空。我个人能想到的一个成本比较低的方法是给列，补上一个不指定宽度的列，这样在Table组件渲染时，该列会按照实际剩余宽度进行渲染，并且内容为空。

   import { Table } from "antd";
   
   const dataSource = [
     {
       key: "1",
       name: "张三",
       age: 32,
       address: "西湖区湖底公园1号"
     },
     {
       key: "2",
       name: "李四",
       age: 42,
       address: "西湖区湖底公园1号"
     }
   ];
   
   const columns = [
     {
       title: "姓名",
       dataIndex: "name",
       key: "name",
       width: 110
     },
     {
       title: "年龄",
       dataIndex: "age",
       key: "age",
       width: 90
     },
     {
       title: "住址",
       dataIndex: "address",
       key: "address",
       width: 220
     },
     {} // 补上的列，实际渲染时宽度为表格组件剩余宽度，内容为空
   ];
   
   export default function MyTable() {
     return (
       <div>
         <Table bordered dataSource={dataSource} columns={columns} />;
       </div>
     );
   }
   
   

   上述代码Demo地址：https://codesandbox.io/s/antd-table-column-width-20220314-02-xppcn4?file=/src/MyTable.js
2. 对于Table组件列宽超过Table容器宽度，期望表格组件出现横向滚动条进行滚动。对于该需求，可以通过指定Table组件属性scroll={{ x: "max-content" }}的方式来调出滚动条。关于scroll属性的说明可以参考文档：https://ant.design/components/table-cn/#scroll。

   import { Table } from "antd";
   
   const dataSource = [
     {
       key: "1",
       name: "张三",
       age: 32,
       address: "西湖区湖底公园1号"
     },
     {
       key: "2",
       name: "李四",
       age: 42,
       address: "西湖区湖底公园1号"
     }
   ];
   
   const columns = [
     {
       title: "姓名",
       dataIndex: "name",
       key: "name",
       width: 500
     },
     {
       title: "年龄",
       dataIndex: "age",
       key: "age",
       width: 400
     },
     {
       title: "住址",
       dataIndex: "address",
       key: "address",
       width: 900
     },
     {}
   ];
   
   export default function MyTable() {
     return (
       <div>
         <Table
           bordered
           dataSource={dataSource}
           columns={columns}
           scroll={{ x: "max-content" }} // 设置scroll
         />
       </div>
     );
   }
   
   

   上述代码Demo地址：https://codesandbox.io/s/antd-table-column-width-20220314-03-e2p223?file=/src/MyTable.js

写在最后

以上就是我关于Table组件的一些疑惑，欢迎大家在评论区进行讨论交流。 : )