前言

前些年參與的幾個(gè)項(xiàng)目，前端部分主要采用Vue+ElementUI進(jìn)行開發(fā)。最近參與的項(xiàng)目，前端部分大膽的轉(zhuǎn)向了React+Antd。

疑惑

在之前的Vue+ElementUI項(xiàng)目里，Table組件列的列寬（各個(gè)列的列寬和）如果超過Table容器寬度，則會(huì)自動(dòng)出現(xiàn)橫向滾動(dòng)條。另外Table組件列的列寬如果達(dá)不到Table容器寬度，Table組件的右側(cè)則會(huì)留空，不顯示任何內(nèi)容?？梢詤⒖糄emo復(fù)現(xiàn)：https://codesandbox.io/s/elementui-table-column-width-20220314-12secw
而Antd中的Table組件，列寬的渲染方式似乎和ElementUI有點(diǎn)不太一樣。在Antd中，不管Table組件列的列寬有沒有超過Table容器的寬度，各個(gè)列實(shí)際渲染的時(shí)候，都是按照當(dāng)前列的列寬占所有列的列寬的拜訪比寬度進(jìn)行渲染的，比如總共有三列A、B、C，寬度分別是50px、50px、100px，A、B、C三列實(shí)際渲染寬度分別是25%、25%、50%，并不是期望的50px、50px、100px。剛接觸Antd的我，對(duì)于這種方式有點(diǎn)百思不得其解。
附上Antd版的Demo地址：https://codesandbox.io/s/antd-table-column-width-20220314-jx7cli?file=/src/MyTable.js

解決方案

1. 對(duì)于Table組件列寬小于Table容器寬度，希望是在Table組件右側(cè)進(jìn)行留空。我個(gè)人能想到的一個(gè)成本比較低的方法是給列，補(bǔ)上一個(gè)不指定寬度的列，這樣在Table組件渲染時(shí)，該列會(huì)按照實(shí)際剩余寬度進(jìn)行渲染，并且內(nèi)容為空。

   import { Table } from "antd";
   
   const dataSource = [
     {
       key: "1",
       name: "張三",
       age: 32,
       address: "西湖區(qū)湖底公園1號(hào)"
     },
     {
       key: "2",
       name: "李四",
       age: 42,
       address: "西湖區(qū)湖底公園1號(hào)"
     }
   ];
   
   const columns = [
     {
       title: "姓名",
       dataIndex: "name",
       key: "name",
       width: 110
     },
     {
       title: "年齡",
       dataIndex: "age",
       key: "age",
       width: 90
     },
     {
       title: "住址",
       dataIndex: "address",
       key: "address",
       width: 220
     },
     {} // 補(bǔ)上的列，實(shí)際渲染時(shí)寬度為表格組件剩余寬度，內(nèi)容為空
   ];
   
   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. 對(duì)于Table組件列寬超過Table容器寬度，期望表格組件出現(xiàn)橫向滾動(dòng)條進(jìn)行滾動(dòng)。對(duì)于該需求，可以通過指定Table組件屬性scroll={{ x: "max-content" }}的方式來調(diào)出滾動(dòng)條。關(guān)于scroll屬性的說明可以參考文檔：https://ant.design/components/table-cn/#scroll。

   import { Table } from "antd";
   
   const dataSource = [
     {
       key: "1",
       name: "張三",
       age: 32,
       address: "西湖區(qū)湖底公園1號(hào)"
     },
     {
       key: "2",
       name: "李四",
       age: 42,
       address: "西湖區(qū)湖底公園1號(hào)"
     }
   ];
   
   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" }} // 設(shè)置scroll
         />
       </div>
     );
   }
   
   

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

寫在最后

以上就是我關(guān)于Table組件的一些疑惑，歡迎大家在評(píng)論區(qū)進(jìn)行討論交流。 : )

參考鏈接：https://blog.csdn.net/m0_58016522/article/details/123470541