当前位置: 首页 > article >正文

react中,如何使用antd的Row栅格系统使元素左对齐

页面展示

元素结构 

 

代码

const handleFormItem = (item, index) => {
  if (item.type === 'date') {
      return (
        <RangePicker
          format="YYYY-MM-DD HH:mm:ss"
          style={{ width: '100%' }}
          showTime={{
            hideDisabledOptions: true,
            defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')],
          }}
          maxDate={dayjs()}
        />
      );
    } else if (item.type === 'range') {
      return <TimePicker.RangePicker placeholder={['请选择时间', '请选择时间']} />;
    } else if (item.type === 'int') {
      return (
        <InputNumber
          style={{ width: '100%' }}
          min={0}
          max={99999}
          placeholder={`请输入${item.name}`}
          onPressEnter={() => {
            searchByFilter(true);
          }}
        />
      );
    } else {
      return (
        <Input
          placeholder={`请输入${item.name}`}
          allowClear
        />
      );
    }
};


<Form form={form} labelCol={{ span: 8 }}>
  <Row> //antd的Row格栅基于flex布局
    {curtShowColumnList.map((item, index) => (
      <Col span={6} key={item.code}>
        <Form.Item name={item.code} label={item.name}>
          {handleFormItem(item, index)}
        </Form.Item>
      </Col>
    ))}
  </Row>
</Form>


http://www.kler.cn/a/509545.html

相关文章:

  • C# 修改项目类型 应用程序程序改类库
  • Excel中函数SIGN()的用法
  • VSCode 的部署
  • 【postgres】sqlite格式如何导入postgres数据库
  • 基于 HTML5 Canvas 制作一个精美的 2048 小游戏--day 1
  • Dubbo泛化调用
  • 基于C#实现对象序列化的3种方案
  • 机器人传动力系统介绍
  • 一文读懂iOS中的Crash捕获、分析以及防治
  • 高斯数据库 Shell 脚本:批量执行 SQL 文件
  • C++ 成员初始化列表
  • 二、点灯基础实验
  • Unreal Engine 5 C++ Advanced Action RPG 九章笔记
  • 迅为RK3568开发板篇OpenHarmony实操HDF驱动控制LED-编写内核 LED HDF 驱动程序
  • 搜维尔科技提供完整的人形机器人解决方案以及训练系统
  • 机器学习加州房价预测模型报告
  • 华为数据中心CE系列交换机级联M-LAG配置示例
  • 13-1类与对象
  • 【21】Word:德国旅游业务❗
  • 游戏引擎学习第81天
  • 探索 Transformer²:大语言模型自适应的新突破
  • wow-agent---task2使用llama-index创建Agent
  • Ubuntu 空闲硬盘挂载到 文件管理器的 other locations
  • Apache 如何设置 Upgrade-Insecure-Requests 报头 ?
  • 用于零镜头视频对象分割的深度感知测试时训练
  • PyTorch基本功能与实现代码