ant-design-pro 的EditableProTable表格验证调用的实现代码

2024-10-20 15:49:02

博客源码https://github.com/shengbid/antdpro-demo,有需要可以下载下来看效果EditableProTable默认是在单行保存时调用表单验证

我这里的需求是点击外部的保存要对整个表单进行验证

EditableProTable提供了editable属性,可以设置form https://procomponents.ant.design/components/editable-table

代码

import React, { useState, useEffect } from 'react'
import { Row, Col, Button, Form, message } from 'antd'
import { EditableProTable } from '@ant-design/pro-table'
const EditZTTable: React.FC = () => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([])
  const [dataSource, setDataSource] = useState<projectRiskProps[]>([])
  const [editForm] = Form.useForm()
  // 提交方法
  const onSave = async () => {
    await editForm.validateFields() // 调用表单验证
  }
  return (
    <>
      <EditableProTable
        columns={columns}
        rowKey="id"
        value={dataSource}
        recordCreatorProps={{
          newRecordType: 'dataSource',
          record: () => ({
            id: Date.now(),
          }),
        }}
        editable={{
          type: 'multiple',
          form: editForm,
          editableKeys,
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete]
          },
          onValuesChange: (record, recordList) => {
            setDataSource(recordList)
          },
          onChange: (editableKeyss, editableRows: projectRiskProps[]) => {
            setEditableRowKeys(editableKeyss)
            setDataSource(editableRows)
          },
        }}
      />
      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          <Button style={{ margin: '15px 8px 0' }} onClick={onCancel}>取消</Button>
          <Button type="primary" onClick={onSave}>保存</Button>
        </Col>
      </Row>
    </>
  )
}

到此这篇关于ant-design-pro 的EditableProTable表格验证调用的文章就介绍到这了,更多相关ant-design-pro表格验证内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Ant Design 组件库按钮实现示例详解

目录 1 antd 之 Button API 2 antd 之 Button 示例 1 antd 之 Button API antd 组件库是基于 Ant Design 设计体系的 React UI 组件库,antd 为 Web 应用提供了丰富的基础 UI 组件,可以用于研发企业级中后台产品.这篇咱们介绍 antd 组件库之按钮. 按钮 Button 是一个比较基础的 UI 组件,一般在有交互的应用中都会用到. 其 DOM 节点为 <Button>...</Button>,ant
Ant Design 组件库之步骤条实现

目录引言 1 antd 之 Steps API 2 antd 之 Steps 示例引言 antd 组件库是基于 Ant Design 设计体系的 React UI 组件库,antd 为 Web 应用提供了丰富的基础 UI 组件,可以用于研发企业级中后台产品.这篇咱们介绍 antd 组件库之步骤条. 1 antd 之 Steps API 步骤条 Steps 的用处是在当任务复杂或者存在先后关系时,将其分解成一系列的步骤,从而达到简化任务的目的.其 DOM 节点为 : <Steps> &l
Ant Design of Vue select框获取key和name的问题

目录 Ant Design of Vue select框获取key和name 我的记录 Ant Design Vue使用select出现的问题 1.select下拉菜单滚动条滚动后,自动弹回到顶部 2.下拉列表在局部滚动时不跟随,与select框分离 Ant Design of Vue select框获取key和name 加入label-in-value这个属性 <a-form-item label="分类"> <a-select placeholder=
关于Ant-Design-Vue快速上手指南+排坑

目录前言 NO.1 表单组件如何自定义表单校验规则表单回显提交表单 NO.2 表格(Table) NO.3 Spin组件打包优化结语前言公司要开发一个后台管理系统,对于UI库的选择上选择了颜值爆表的Ant-Design-Vue作为整个项目UI库,但谁曾想,暗中的坑一个接一个,文档也不怎么详细,可能习惯了element-ui的掘友们也许不怎么好适应,本文就带大家一起学习如何高效使用Ant-Design-Vue. NO.1 表单组件首先就来说说最常用的Form组件的正确使用姿势:
ant design vue的form表单取值方法

目录 ant design vue的form表单取值官方中有以下两种取值方式 ant design of vue 学习之表单form v-decorator(表单验证,内置绑定,初始值) 数据获取与填充表单实例 ant design vue的form表单取值官方中有以下两种取值方式因为不是很熟悉,所以还是查了文档找了一下使用方式,刚开始查到的文档是这样写的然后返回了undefined,后来又查询了一些文档,发现我多加了一个props属性,然后使用第二个方法成功了,代码如下: ant d
Ant Design Vue 走马灯实现单页多张图片轮播效果

最近的项目有个需求是,这种单页多图一次滚动一张图片的轮播效果,项目组件库是antd 然而用了antd的走马灯是这样子的我们可以看到官网给的api是没有这种功能,百度上也多是在css上动刀,那样也就毕竟繁琐了,我们是什么?我们是程序猿啊,程序猿就该有程序猿的样子,怎么能写繁琐的东西呢,那还怎么为公司项目提高效率!!!(我哪敢说是为了摸鱼啊) 为了追求摸鱼的真谛我仔细查阅了文档https://github.com/vueComponent/ant-design-vue/blob/master/co
如何使用ant-design-vue的Table组件

目录安装脚手架工具使用Vue CLI新建项目 $slots Table组件相关源码安装脚手架工具 npm install -g @vue/cli 查看@vue/cli版本,vue -V. 使用Vue CLI新建项目 vue create antd-demo 下载ant-design-vue,ant-design-vue@2.1.6 npm install ant-design-vue@next --save 修改main.js,完整引入ant-design-vue所有组件及样式 impor
ant-design-pro 的EditableProTable表格验证调用的实现代码

博客源码https://github.com/shengbid/antdpro-demo,有需要可以下载下来看效果EditableProTable默认是在单行保存时调用表单验证我这里的需求是点击外部的保存要对整个表单进行验证 EditableProTable提供了editable属性,可以设置form https://procomponents.ant.design/components/editable-table 代码 import React, { useState, useEffect
Ant Design Pro 之 ProTable使用操作

标签<ProTable> Pro-Table 是阿里Ant Design Pro V4版本,在Table基础上再封装的一个组件,包含完整的增删改查逻辑,不用复杂的操作,简单几个配置即可实现官网Api地址 https://protable.ant.design/ 示例 V4版本刚出不久,网上的教程还比较少,踩了不少坑,把自己学习过程分享出来,希望可以帮到你创建项目(需要node.js及npm环境) npm config set registry https://registry.npm.ta
ant design pro中可控的筛选和排序实例

我就废话不多说了,大家还是直接看代码吧~ /** * Created by hao.cheng on 2017/4/15. */ import React from 'react'; import { Table, Button } from 'antd'; const data = [{ key: '1', name: '张三', age: 22, address: '浙江省温州市', }, { key: '2', name: '李四', age: 42, address: '湖南省湘潭市',
在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

前言: 本篇文章只介绍在Ant Design Pro登录功能中集成图形验证码组件的方法步骤,服务端方法请参考<基于OAuth2.0授权系统的验证码功能> 正文: 在Ant Design Pro模板中,使用账号密码登录功能部分(如下图),并没有做图形验证码的开发,所以这部分功能就需要我们自己去实现.这里登录功能其实本质是一个表单提交,所以我们只需自己开发一个图形验证码表单控件就可以,具体实现如下. 1. 图形验证码表单控件代码CaptchaInput.tsx: import React, {us
浅谈Ant Design Pro 菜单自定义 icon

Ant Design Pro 官方文档说明在菜单中使用自定义的 icon 由于 umi 的限制,在 router.config.js 是不能直接只是用组件的,Pro 中暂时支持使用 ant.design本身的 icon type,和传入一个 img 的 url.只需要直接在 icon 属性上配置即可,如果是个 url,Pro 会自动处理为一个 img 标签. 如果这样还不能满足需求,可以自定义 getIcon 方法. 如果你想使用 iconfont 的图标,你可以使用ant.desgin的自
Ant Design Pro 下实现文件下载的实现代码

最近编写在页面内通过 AJAX 请求服务器下载文件遇到一些问题,网上找的资料和介绍大多不健全不系统,最终自己摸索出来的解决方案,先简单写个初稿,后面再详细补充. 表一:前端请求后端下载文件的各种情况请求方法请求方式响应结果 GET 页面跳转文件对应的 URL POST AJAX 文件的二进制流首先,需要在 src/service/api.js 里声明对应请求返回的文件类型: import request from '@/utils/request'; export async func
ant design vue 表格table 默认勾选几项的操作

为什么我同样的功能要用react .vue 都写一遍 ? 啊我真是不是闲的蛋疼啊(- o -)~zZ 在 ant design vue 中,表格的第一列是联动的选择框截一张官方文档图,图示最后一排就是禁用状态点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组. onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedR
ant design的table组件实现全选功能以及自定义分页

我就废话不多说了,大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.st
ant design vue导航菜单与路由配置操作

此功能包含: 1.根据动态路由自动展开与自动选择对应路由所在页面菜单 2.只展开一个子菜单 3.兄弟组件控制菜单与路由 <a-menu :openKeys="openKeys" :selectedKeys="selectedKeys" mode="inline" theme="dark" :inlineCollapsed="$store.state.isCollapse" @click='select
ant design vue嵌套表格及表格内部编辑的用法说明

实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

ant-design-pro 的EditableProTable表格验证调用的实现代码

相关推荐

随机推荐