Antd table-column设置align类型不兼容以及无效问题

已于 2023-06-02 17:22:41 修改
阅读量1.6k 收藏 1
点赞数
文章标签： 前端 css
于 2023-06-02 17:21:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dahui_program/article/details/131010612
版权
文章描述了在使用AntDesign的Table组件时遇到的align属性类型不兼容问题，提供三种解决方案：类型断言，引入AlignType并断言，以及设置ColumnsType。另外，还提到了在有过滤器的情况下，align设置可能因内部flex布局无效，需通过修改css样式来实现居中。

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

  • 报错：align类型不兼容

往column数据中添加align属性后组件报错“属性“align”的类型不兼容。不能将类型“string”分配给类型“AlignType | undefined”。”

解决方法一：

直接as类型断言

align: "center" as "center",

解决方法二：

引入AlignType，as类型断言，比优雅一点但不多

import {AlignType} from "rc-table/lib/interface" 

align: "center" as AlignType

 解决方法三：

设置column的类型为ColumnsType<Object>(官方文档用法)

表格 Table - Ant Design

  • align设置无效

在列中设置align:"center"发现不起效果，看了下元素发现属性加上去了，但是因为加了filter，标题和icon包在一个flex盒子里导致对内部元素无效，设置ant-table-filter-column的justify-content为center

批量修改css的样式

Dahui_program
关注
antd组件中的Table表格相关知识
qq_41988113的博客
07-28 2339
打印出来text和record，可以看到，text是location的值，record是这一整行的值。一、Column（列描述数据对象，是columns中的一项，）生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引。二、实现Table表格的拖拽排序。......
antd table动态表头_react动态配置antd table的columns
weixin_42128141的博客
02-15 4977
constructor(props) {super(props)this.state = {fieldDdata: data,//操作动态columns的配置columns: [],tableDate: [],}}columns={this.state.columns}dataSource={this.state.tableDate}/>onClick={event => {event...
antd中属性“align”的类型不兼容。不能将类型“string”分配给类型“AlignType | undefined”问题解决方案
09-27 748
然后我就使用了： align: 'center' as const,真的厉害啊，我也是不知所措，看了官网的类型描述：不知所以。
记一个使用ant desgin vue 2.0 a-table slots失效bug
最新发布
a_biggerfish的博客
04-15 215
在使用slots 去自定义标题的时候，发现slots里面的内容一直失效，后来发现是因为。columns中的这一列的title没有去掉，去掉就正常了。
Ant Design Vue Table 列属性报错 Type ‘string‘ is not assignable to type ‘AlignType | undefined‘.
三劫散仙
11-21 1567
整体感觉 TypeScript 的类型限制方案还有缺陷或者说不完美，要么就和 Java 强类型一样，用枚举限制某些值，真的没必要出现 Type 这种不伦不类的数据类型，还容易和 Interface 极度混淆，这对于非专业前端的后端来说真的是有点痛苦。
antd框架table组件column根据值判断显示内容
m0_62323931的博客
04-23 392
无
react-antd-column-resize 实现 Ant Design 表格列宽拖动
weixin_46446590的博客
07-06 1670
这是一个基于React Hooks开发的组件，专门用于实现Ant Design表格（table）的列宽度拖动调整功能。如果你对该组件感兴趣并打算使用它，我强烈建议你给它一个star，以支持这个开源项目的发展。通过使用这个Hooks，你可以轻松地定义拖动调整列宽度的最小宽度、最大宽度和默认宽度。当今的Web应用开发中，表格是一个非常常见且重要的组件。然而，许多开发者在使用表格组件时常常面临一个问题：如何让表格的列宽度可以拖动调整？在你的React组件中，你可以按照下面的代码示例来使用。宽度所需的必要数据。
【前端】table中显示布尔值、动态确定按钮状态
木同的小心情
07-15 1862
记录一下今天在写前端页面时碰到的几个问题，分别是： 1、前端table中需要展示的数据中有几项为布尔值，而页面上不能直接以字符串的形式进行显示； 2、需要根据数据状态确定是否能对该行数据对应的记录进行操作，因为部分数据只是为了展示后台对应的运行状态，其对应的操作按钮应禁用以防止前端误操作； 3、table表头及内容对齐问题； 1、问题1解决方案： 该问题解决方案来自csdn_jy的文章Element-ui中Table表中el-table-column列数据的布尔值回填: 利用table提供的formatte
Ant Design Vue a-table标签使用插槽slot写column时，调用record提示无法获取record的属性
m0_54866636的博客
03-03 1804
今天在项目时遇到一个小bug，出现的原因也有点细，不仔细看还真看不出来，记录一下，希望下次不要因为这种小问题调bug了。 问题描述： a-table中的solt如下 <template slot="title" slot-scope="text, record"> <a @click="onDetail(record)">{{ record }}</a> </template> colomn中的title写法如下 {
Ant-Table查看详情
臧小川的博客
05-19 883
效果图 JS import { useState, useEffect, useRef } from 'react' import styles from './style.less' import { Table, Space } from 'antd'; const dataSource = [ { name: '羽神', grade: '优', time: '2022-5-13 2022-5-18', detail: '我跨
antd-vue表格二次封装定制化
weixin_44191425的博客
08-16 982
index.vue <template> <div class="table"> <a-table :row-selection=" isRowSelection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange, } : null .
在antd Table中插入可编辑的单元格实例
01-21
最近遇到一个需求，要求表格中某一属性是可以手动改变的。看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是都定义成了同一个变量，后来家里一个动态的后缀。具体代码见贴图 补充知识：React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据 实现如下图所示需求： 实现功能说明： 点击添加按钮，在表格中添加新的空白行（如下图所示），在点击提交的时候获取空白行的数据 在构造函数内定义： co
解决Antd Table组件表头不对齐的问题
01-18
背景： 在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案： 1、对表格的每一行 【columns】设置width属性（留出一行进行宽度自适应）； 2、scroll属性中的x选择一个合适的值（或者直接设为 max-content）； 如果以上两步仍解决不了对齐问题的话，请继续第三步操作 3、对table的每一个td 添加 className=“word-wrap”，并设置对应样式 （因为t
antd Table（columns添加事件传参失效）columns在父组件，向子组件传参columns
Z_Wonderful的博客
04-03 594
将table封装成一个公共组件使用，columns在父组件内传参table子组件。
Antd 3.0 table，表格组件（Table属性，Column属性，RowSelection属性）
hzzh_kk的博客
03-01 3029
​ 1.datasouce：传入数组，类型可以是字符串，数字，对象，也可以通过判断（xxx?​ 2.onChange：当改变的时候，将选中的值保存并赋值给selectedRowKeys属性，也可以做其他逻辑操作。​ 5.RowClassName：可以设置某一行的列名，从而设置某一行的列的样式，index为行数的索引。ange：当改变的时候，将选中的值保存并赋值给selectedRowKeys属性，也可以做其他逻辑操作。​ 1.selectedRowKeys：对应选中的行的key值（哪几行被选中了）。
设置了*{margin:0;padding:0}后table的align:center失效
King的博客
07-08 1524
今天在做一个表格时，开头在内部样式表中写了： *{ margin:0; padding:0; } 问题一 当我在body里面做表格时，发现table的 align:center;属性失效，不能居中了。 查阅相关资料后，发现是 margin:0 导致的。 解决办法：在table中设置 margin:auto; 即可。 问题二 当我在table中设置 cellpadding 属性时也失效了。 ...
antd table column 列表渲染
datouniao1的博客
10-30 4694
在上面的table中，使用了两处的渲染，第一个是是否，第二个是两个按钮 我们选来看第二个，两个按钮的渲染，这个里面没有条件 { title: '操作', dataIndex: 'rowguid', key: 'rowguid', render: (text, record) => ( <Space> <Button type="primary" size="small" onClick= ...
基于Antd Table自定义通用columns列筛选配置
小陈的博客
11-05 1622
最近因为工作需要，用到了富文本编辑器让用户填写反馈，上传图片等功能，经过一些对比选择了tinymce,记录下图片相关问题。完整版封装的组件代码，放到最后。环境这里由于开发环境是vue2,所以目前这个时间点，需要选择版本的去安装，引用官方文档的一句话这个比较简单，在_init的配置中，配置images_upload_handler_ 图片粘贴 刚开始是想到的直接监听的事件，去获取剪切板的图片，代码如下： 后来发现不生效，检查一下元素得知，tinymce是通过使用的，后来找到了配置项，返回的实例可以监听粘贴事件
Ant Design 表头居中，内容居中
u013432938的博客
07-01 2937
Ant Design 表头居中，内容居中 Ant Design 表头居中的做法： const columns = [ { title: '单位名称', dataIndex: 'jwqbm', width: '146', align:'center' } } 直接在定义列的时候，定义：align:‘center’； Ant Design 内容居中的做法： 在定义列的时候，定义一个className:‘class-cent
举一个完整的例子，vue3中antd的table怎么竖着排列
10-17
在Vue 3中使用Ant Design (AntD) 的 Table 组件实现数据竖向排列，通常我们会通过调整 `columns` 配置来指定列的方向。下面是一个简单的示例： ```html <a-table :columns="columns" :data-source="data"> <!-- ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值