Ant Design 表格控件Table固定列宽

Ant Design是强大的前端组件库,项目中使用其Table组件时发现列宽无法固定,虽有width属性但不好使。最后采用折中办法,通过样式覆盖设置所有列宽的最大最小值,使用:global并结合特定父class防止覆盖全局。

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

Table控件

Ant Design 是蚂蚁金服试用的前端组件,很强大的控件库,目前的项目在使用。
使用过程中发现Table组件的一个小问题,就是列宽无法固定,一个table中必须有一列或者多列的列宽处于浮动状态,无法所有的列宽都固定。

虽然提供了width属性,但是也不好使

最后使用一个折中办法,通过样式覆盖设置所有列宽的最大最小值:

:global {
.rightExamineContent .ant-table-wrapper tr>td:first-child {
    min-width: 93px;
    max-width: 93px;
  }
  .rightExamineContent .ant-table-wrapper tr>td:not(:first-child) {
    min-width: 60px;
    max-width: 60px;
  }
}

注意要使用:global,同时为了防止覆盖全局,使用特定的父class覆盖。

### Ant Design 实现表格数据录入方法 在 Ant Design 中实现表格的数据录入功能涉及多个方面,包括表单设计、事件处理以及状态管理。为了创建一个能够支持数据录入的表格组件,可以遵循以下模式。 #### 创建可编辑单元格 为了让表格中的某些具备输入能力,可以通过 `EditableCell` 或者直接利用内置的 `Input`, `Select` 组件来构建可编辑字段[^1]。对于每一个需要编辑的单元格来说,在其对应的渲染函数内加入这些交互控件即可完成初步设置。 ```jsx import { Input, Select } from 'antd'; const EditableCell = ({ editing, dataIndex, title, inputType, record, index, children, ...restProps }) => { let inputNode; if (inputType === 'number') { inputNode = <InputNumber />; } else if (inputType === 'select') { inputNode = ( <Select> {/* Options go here */} </Select> ); } else { inputNode = <Input />; } return ( <td {...restProps}> {editing ? ( <form style={{ margin: 0 }}> {inputNode} </form> ) : ( children )} </td> ); }; ``` #### 处理编辑逻辑 当用户修改某一行的内容时,应当更新本地存储的状态,并确保这种变化能被正确反映出来。这通常涉及到维护一个包含所有行记录的对象表作为组件的状态部分[^2]。每当发生变更操作时,就触发相应的回调函数用于同步最新版本的信息至该对象集合之中。 ```javascript // 假设 state 形如 [{ key: '1', name: 'John Brown' }, ...] handleSave(record) { this.setState({ data: this.state.data.map(item => item.key === record.key ? { ...item, ...record } : item, ), }); } render() { const components = { body: { cell: EditableCell, }, }; const columns = this.columns.map(col => ({ ...col, onCell: record => ({ record, editable: col.editable, dataIndex: col.dataIndex, title: col.title, handleSave: this.handleSave.bind(this), }), })); return <Table bordered components={components} rowClassName={() => 'editable-row'} dataSource={this.state.data} columns={columns} />; } ``` #### 添加新条目 除了允许现有项更改外,还应提供一种简便的方式让用户添加全新的项目进入数据库或内存缓存里。一般情况下会额外增加一个按钮用来启动新增流程;随后弹出对话框或是切换到特定视图下收集必要的参数值并最终提交入库[^3]。 ```jsx addNewRecord = () => { const newData = { key: Date.now(), // Initialize other fields... }; this.setState({ data: [...this.state.data, newData], editingKey: newData.key }); }; <Button onClick={this.addNewRecord}>Add New Record</Button> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前鼻音太阳熊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值