使用React+antd实现表格数据校验和回填
描述
用React和antd实现表格数据校验和回填
实现效果图如下：
代码如下：
import React, {Component} from "react"
import {Table, Form, Input, Modal, Button} from "antd"
import 'antd/dist/antd.css'
import styled from "styled-components";
class ProjectMember extends Component {
constructor(props) {
super(props);
this.state = {
selectedOperate: null,//选中的操作员
visible: false,
columns: [
{
title: "角色",
dataIndex: "roleName",
align: "center",
render: (text, record) => {
if (record.roleId.indexOf("_R") > -1) {
return (
* {text}
)
} else {
return ({text})
}
}
},
{
title: "操作员",
dataIndex: "operateName",
align: "center",
render: (text, record) => {
const {
form: {getFieldDecorator}
} = this.props
const index = record.roleId.indexOf("_R")
const rules = {
initialValue: record.operateName,
rules: [
{
validator: (rule, value, callback) => {
if (index > -1 && !value) {//是必填并且没有值
callback("未选择操作员");
} else {
callback();
}
}
}
]
}
return (
{
getFieldDecorator(`${record.roleId}_operateName`, rules)
( {
this.openPop(record)
}}
onSearch={() => {
this.openPop(record)
}}
/>)
}
)
}
},
{
title: "手机号",
dataIndex: "phone",
align: "center",
render: (text, record) => {
const {
form: {getFieldDecorator}
} = this.props
return (
{
getFieldDecorator(`${record.roleId}_phone`)
()
}
)
}
},
{
title: "邮箱",
dataIndex: "email",
align: "center",
render: (text, record) => {
const {
form: {getFieldDecorator}
} = this.props;
return (
{
getFieldDecorator(`${record.roleId}_email`)
()
}
)
}
}
],
roleList: [
{id: 1, roleId: "001_R", roleName: "组长"},
{id: 2, roleId: "002", roleName: "副组长"},
{id: 3, roleId: "003", roleName: "组员"}],
operateColumns: [
{title: "姓名", dataIndex: "operName", align: "center"},
{title: "工号", dataIndex: "operCode", align: "center"}
],
operateList: [
{id: 11,operName: "张杰",operCode: "001", phone: "18765432890"},
{id: 22,operName: "扎西彭措",operCode: "002", phone: "16543234567"},
{id: 33,operName: "赵丽颖",operCode: "003", phone: "17654378906"}
]
}
}
// 展示弹框
openPop = (record) => {
this.setState({visible: true, selectRole: record})
}
// 查询操作员弹框确定后回填
handleOk = () => {
const {selectedOperate, selectRole} = this.state
if (!selectedOperate) {
Modal.info({
title: "提示",
content: "未选择操作员",
okType: "primary",
okText: "知道了"
})
return
}
this.props.form.setFieldsValue({
[`${selectRole.roleId}_operateName`]:selectedOperate.operName,
[`${selectRole.roleId}_phone`]:selectedOperate.phone,
[`${selectRole.roleId}_email`]:`${selectedOperate.phone}@qq.com`,
})
this.setState({visible: false})
}
handleAdd = () => {
this.props.form.validateFieldsAndScroll((error, values) => {
if (!error) {
const newRoleList = this.state.roleList.map(item => {
if(values[item.dictId]) {
return {
...item
}
}
})
}
})
}
// 选择某个操作员
select = (record,selected, selectedRows, nativeEvent) => {
this.setState({selectedOperate: record});
}
render() {
const {columns, roleList, visible, operateColumns, operateList} = this.state;
return (
);
}
}
const ProjectMemberForm = Form.create({name: "ProjectMenber"})(ProjectMember)
export default ProjectMemberForm;
const RequriedSpan = styled.span`
color: red;
`
const NameDiv = styled.div`
width: 70%;
margin: 0 auto;
`
const TableStyle = styled(Table)`
.ant-table-body {
width: 80%;
margin: 0 auto;
}
`
const ButtonStyle = styled.div`
text-align: center;
`
总结
给table里的每条数据进行校验的时候，因为每条数据的字段名dataIndex是一样的，所以校验的要确保每条数据都是唯一的，即加一个唯一标识区分每个字段。