首页 前端知识 antd Table组件——固定列宽度遇到的问题

antd Table组件——固定列宽度遇到的问题

2024-06-04 10:06:17 前端知识 前端哥 314 626 我要收藏

今日在写前端时使用antd Table组件展示多列数据时,出现了某一列数据内容巨多巨长导致其他列被严重挤压的情况,表格形态非常丑。于是搜索官网的解决方法如下:主要思想便是固定其他列宽度,但不固定数据较多的一列的宽度,让其宽度自适应其他列固定后剩下的宽度,触发弹性布局。

以下是官网给出的相应代码:

import { Table } from 'antd';
import React from 'react';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: 150,             //固定宽度
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: 150,              //固定宽度
  },
  {
    title: 'Address',
    dataIndex: 'address',    //该列自行填充
  },
];
const data = [];

for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const App = () => (
  <Table
    columns={columns}
    dataSource={data}
    pagination={{
      pageSize: 50,
    }}
    scroll={{
      y: 240,
    }}
  />
);

export default App;

遇到的问题:

这样设置之后,我想在Table组件上通过style属性设置Table的总宽度,发现width不管如何设置都毫无反应,后猜测是因为弹性布局让width失效(底层原理不知),解决方案就是把所有列都设置固定宽度,表格宽度将随着固定宽度之和的增加而增加。【如果要使得style中的width生效,需要取消所有列设置的固定宽度】

对于前面提到的列中出现大量内容时应如何展示,最好的解决办法还是设置column 的ellipsis属性,ellipsis属性设置为true时,会将超过列宽度的内容自动省略号折叠,当鼠标hover在该省略内容上时,又会通过tooltip显示完整内容。

综上,把上述代码修改如下:

import { Table } from 'antd';
import React from 'react';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: 150,             //固定宽度
    ellipsis:true
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: 150,              //固定宽度
    ellipsis:true
  },
  {
    title: 'Address',
    dataIndex: 'address',    //固定宽度
    width: 250, 
    ellipsis:true
  },
];
const data = [];

for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const App = () => (
  <Table
    columns={columns}
    dataSource={data}
    pagination={{
      pageSize: 50,
    }}
    scroll={{
      y: 240,
    }}
  />
);

export default App;

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10786.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!