antd-- column的width不生效

最新推荐文章于 2024-07-05 15:36:23 发布

前端小妹

最新推荐文章于 2024-07-05 15:36:23 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： antd 文章标签： html css html5

本文链接：https://blog.csdn.net/qq_51545524/article/details/120861434

antd 专栏收录该内容

4 篇文章

订阅专栏

当在Ant Design表格中遇到Column的width属性不生效的情况，可以通过获取组件内部元素的宽度并直接通过style设置来解决。具体实现可以使用代码进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

width：30% 一直不生效时，取组件内部的id，获取宽度，再style给到标签

可复制代码：

const columns = [
        {
            title: '分区字段标签',
            dataIndex: 'partitionValues',
            key: 'partitionValues',
            width: '30%',
            render: (text, record, index) => {
              if (!!text) {
                 const box = document.getElementsByClassName('ant-table-tbody')[0];
                    const widthBox = box.clientWidth * 0.2;
                    const tooltipResult = Object.entries(text).map(res => {
                        return `${res[0]} = ${res[1] || '-'}`

                    })
                    return <Tooltip title={tooltipResult.join('\n')}>
                      {
                        Object.entries(text).map((res, index) => {
                            return <div className="only-show-one-line" key={index}                                                 
                                                     style={{maxWidth: widthBox}}>
                                    {`${res[0]} = ${res[1] || '-'}`}
                                </div>
                            })
                        }
                    </Tooltip>
                } else {
                    return '全部'
                }
            }
        },