关于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,宽度分别是50px50px100px,A、B、C三列实际渲染宽度分别是25%25%50%,并不是期望的50px50px100px。刚接触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 (
        
    ; ); } 上述代码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 (
        
  3. ); } 上述代码Demo地址:https://codesandbox.io/s/antd-table-column-width-20220314-03-e2p223?file=/src/MyTable.js

    写在最后

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

    参考链接:https://blog.csdn.net/m0_58016522/article/details/123470541

    你可能感兴趣的:(关于Antd Table组件列宽的一些疑惑)