前言

前些年參與的幾個(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)容”岫拢可以參考Demo復(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的我，對于這種方式有點(diǎn)百思不得其解杉编。
附上Antd版的Demo地址：https://codesandbox.io/s/antd-table-column-width-20220314-jx7cli?file=/src/MyTable.js

解決方案

1. 對于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號"
     },
     {
       key: "2",
       name: "李四",
       age: 42,
       address: "西湖區(qū)湖底公園1號"
     }
   ];
   
   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. 對于Table組件列寬超過Table容器寬度族购，期望表格組件出現(xiàn)橫向滾動(dòng)條進(jìn)行滾動(dòng)。對于該需求陵珍，可以通過指定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號"
     },
     {
       key: "2",
       name: "李四",
       age: 42,
       address: "西湖區(qū)湖底公園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" }} // 設(shè)置scroll
         />
       </div>
     );
   }
   
   

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

寫在最后

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

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