머리말

지난 몇 년간 참여한 여러 프로젝트에서 프론트엔드 부분은 주로 Vue+ 를 사용하여 ElementUI개발되었습니다 . 최근 프로젝트에 참여하면서 프론트엔드 부분을 과감하게 React+ 로 바꾸었습니다 Antd.

혼란시키다

이전 Vue+ ElementUI프로젝트 에서는 Table구성 요소 열의 열 너비(각 열의 열 너비 합계)가 Table컨테이너 너비를 초과하면 자동으로 가로 스크롤 막대가 나타납니다. 또한 구성 요소 열의 열 너비가 컨테이너 너비 Table에 도달하지 않으면 구성 요소의 오른쪽이 비어 있고 아무것도 표시되지 않습니다. 데모를 참조하여 재현할 수 있습니다: https://codesandbox.io/s/elementui-table-column-width-20220314-12secw 구성 요소 중 열 너비의 렌더링 방법이 약간 다른 것 같습니다 . 에서는 컴포넌트 컬럼의 컬럼 너비가 컨테이너의 너비를 초과하는지 여부에 관계없이 각 컬럼이 실제로 렌더링될 때 모든 컬럼의 컬럼 너비에 대한 현재 컬럼의 컬럼 너비의 액세스 비율 너비에 따라 렌더링됩니다. 예를 들어 A, B, C 세 개의 열이 있고 너비는 각각 , , 이고 세 열 A, B, C 의 실제 렌더링 너비는 , , , 예상하지 못한 , , 입니다 . 신인인 저는 이 방법이 조금 의아했습니다. 데모 주소 첨부 버전: https://codesandbox.io/s/antd-table-column-width-20220314-jx7cli?file=/src/MyTable.jsTableTable
AntdTableElementUIAntdTableTable50px50px100px25%25%50%50px50px100pxAntd
Antd

해결책

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>
  );
}

위 코드의 데모 주소: https://codesandbox.io/s/antd-table-column-width-20220314-02-xppcn4?file=/src/MyTable.js

Table구성 요소의 열 너비가 컨테이너 너비를 초과하는 경우 Table스크롤을 위해 테이블 구성 요소에 가로 스크롤 막대가 나타날 것으로 예상됩니다. 이 요구 사항의 경우 Table구성 요소 속성을 지정하여

scroll={ 
    { x: "max-content" }}

스크롤 막대를 호출할 수 있습니다 . 속성에 대한 설명은 https://ant.design/components/table-cn/#scrollscroll 문서를 참조하십시오 .

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>
  );
}

위 코드의 데모 주소: https://codesandbox.io/s/antd-table-column-width-20220314-03-e2p223?file=/src/MyTable.js

마지막에 쓰기

위의 내용은 구성 요소에 대한 몇 가지 Table의심 사항입니다. 의견 영역에서 논의하고 교환하는 것을 환영합니다. :)

Antd 테이블 구성 요소의 열 너비에 대한 몇 가지 의심

머리말

혼란시키다

해결책

마지막에 쓰기

추천