AntDesign - UI -vue 列表表单验证，多条数据验证，正则验证，正则提示
vue antUI - 列表表单验证，
一般的表单验证，需要提交的数据是是一个对象类似于下面的样子，
formData:{
name: '',
age: '',
phone: ''
}
但是我们经常会碰到这样是数据结构,我们去验证下面图片的列表里每一个字段的填写状态时，之前的绑定porp的方式就不灵了，需要处理一下。
其实官网上面是有类似的例子的 antUI表单提交ui
很多人都没找到，我也是那天被产品逼着，弄出来的，一开始去百度的，查不到，后面就试着去看官网，一个一个的看，看到最后的时候，发现里面竟然有，稍微改造一下就弄好了，现在分享给大家。
这是官网的截图
formData:{
name: '',
age: '',
phone: ''，
familyList: [
{
name: '',
age: '',
phone: ''，
}
]
}
这是我做的，点击提交会对每个填写porp的参数校验
具体代码。。。还是发出来把，其实你看看官网就知道了，但是估计会有写新手还是不会弄
大概说一下
a-form-item-model 标签循环之后，
最重要的其实就是这一句 :prop="‘checkPointItemList.’ + index + ‘.relation’ "
这是官网那边的写法，如果不知道这个，那要不知道费多少牛劲了，但是知道了后，也就那样，只是一个规定写法而已，没啥技术含量
最后有人肯定想问， elementui可以这样写吗，我去官网看了一下，上面没有类似的例子，不清楚，如果可以欢迎告诉我，
<template>
<page-container :title="false">
<a-spin :spinning="spinning" :delay="500">
<div class="table-page-search-wrapper">
<a-form-model
ref="ruleForm"
:rules="rules"
:model="queryParam"
layout="inline"
:label-col="{ style: { width: '150px' } }">
<a-card
:bordered="false"
style="margin: 0 15px"
:bodyStyle="{ paddingTop: '30px',}">
<a-row :gutter="24">
<a-col :lg="8" :md="12" :sm="12" :xs="24" >
<a-form-model-item prop="deptId" label="所属部门/车间">
<a-tree-select
v-model="queryParam.deptId"
allowClear
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:tree-data="signOrgNameOptions"
placeholder="所属部门/车间"
@change="changeDeptIdFun"
allow-clear
tree-default-expand-all
:rules="{
required: true,
message: '不能为空',
trigger: 'change',
}"
/>
</a-form-model-item>
</a-col>
<a-col :lg="8" :md="12" :sm="12" :xs="24" >
<a-form-model-item prop="timeLimit" label="检查时限">
<div style="margin-bottom: 16px">
<a-input
style="width:100%"
:max="99999"
precision="0"
type="number"
:rules="{
required: true,
message: '不能为空',
trigger: 'change',
}"
v-model="queryParam.timeLimit"
placeholder="请输入数字">
<a-select slot="addonAfter" v-model="queryParam.timeLimitUnit" default-value="MIN" style="width: 80px">
<a-select-option v-for="(item) in timeLimiList" :key="item.value" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select>
</a-input>
</div>
</a-form-model-item>
</a-col>
<a-col :lg="8" :md="12" :sm="12" :xs="24" >
<a-form-model-item prop="checkLocation" label="检查点/位置">
<a-input
maxLength="50"
allowClear
:rules="{
required: true,
message: '不能为空',
trigger: 'change',
}"
v-model="queryParam.checkLocation"
placeholder="请输入"/>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="24" type="flex" style="padding: 10px 0 20px 0">
<a-col flex="150px" style="padding-right:0">
<h4 style="text-align:right"> 检查内容与要求：</h4>
</a-col>
<a-col flex="1" style="padding-left:0">
<div class="tableMakeClass">
<a-table
bordered
:data-source="queryParam.checkPointItemList"
width="600px">
<a-table-column title="序号" data-index="index" align="center" width="70px" >
<template slot-scope="text,record, index">
{{ index + 1 }}
</template>
</a-table-column>
<a-table-column title="检查内容与要求" align="center" data-index="checkContent" >
<template slot-scope="text, record,index">
<a-form-model-item
:prop="'checkPointItemList.' + index + '.checkContent' "
:rules="{
required: true,
message: '不能为空',
trigger: 'blur',
}"
>
<a-input
style="margin: -5px 0"
maxLength="30"
allowClear
v-model="record.checkContent"
/>
</a-form-model-item>
</template>
</a-table-column>
<a-table-column title="是否关联设备数据" align="center" data-index="relation" width="240px">
<template slot-scope="text, record, index">
<a-form-model-item
v-if="!detail"
:key="index"
:prop="'checkPointItemList.' + index + '.relation' "
>
<!-- 是否关联设备数据 true 关联 false不关联 -->
<a-radio-group name="radioGroup" v-model="record.relation" :default-value="true">
<a-radio :value="true">
关联
</a-radio>
<a-radio :value="false">
不关联
</a-radio>
</a-radio-group>
</a-form-model-item>
<span v-else>{{ text }}</span>
</template>
</a-table-column>
<a-table-column align="left" title="操作" width="150px" v-if="!detail">
<template slot-scope="text,record, index">
<a-button style="margin-left: 5px" icon="plus" @click="addContentRaw(queryParam.checkPointItemList, index)"></a-button>
<a-button icon="delete" @click="removeContentRaw(queryParam.checkPointItemList, index)"> </a-button>
</template>
</a-table-column>
</a-table>
</div>
</a-col>
</a-row>
<a-row :gutter="24" >
<a-col class="tableMakeClass" :lg="12" :md="12" :sm="12" :xs="24" >
<a-form-model-item
prop="checkList"
label="关联检查设备"
:rules="{
required: true,
message: '不能为空',
trigger: 'blur',
}"
>
<a-select
mode="multiple"
allowClear
v-model="queryParam.checkList"
style="width: 100%"
placeholder="Please select"
@change="handleChange"
>
<a-select-option v-for="(item) in inspectDataList" :key="item.id" >
{{ item.equipName }}
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="detail">
<a-col :lg="12" :md="12" :sm="12" :xs="24" >
<a-form-model-item label="创建人" >
<span> {{ queryParam.createName }}</span>
</a-form-model-item>
</a-col>
<a-col :lg="12" :md="12" :sm="12" :xs="24" >
<a-form-model-item label="创建时间">
<span> {{ queryParam.createTime }}</span>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="24" >
<a-col class="itextarealass" :lg="12" :md="12" :sm="12" :xs="24">
<a-form-model-item prop="descs" label="备注">
<!-- 这是我自己写的一个输入框组件，但是替换成你想要的 -->
<my-textarea
maxLength="50"
allowClear
v-model="queryParam.descs"
placeholder="备注"
/>
</a-form-model-item>
</a-col>
</a-row>
</a-card>
<a-card
:bordered="false"
style="margin: 15px"
:bodyStyle="{ paddingTop: '15px' }">
<div style="text-align: center;">
<a-space>
<a-button type="primary" @click="addFun">提交</a-button>
<a-button type="info" @click="clsoeFun">返回</a-button>
</a-space>
</div >
</a-card>
</a-form-model>
</div>
</a-spin>
</page-container>
</template>
<script>
import { STable } from '@/components'
import requestURLs from '@/api/smartInspection/inspectPoint'
export default {
name: 'CommitmentModelPerson',
components: {
STable,
},
data () {
return {
timeLimiList: [
{ name: '分钟', value: 'MIN' },
{ name: '小时', value: 'HOUR' },
{ name: '日', value: 'DAY' },
{ name: '周', value: 'WEEK' },
{ name: '月', value: 'MONTH' }
],
signOrgNameOptions: [],
inspectDataList: [],
personSelectModalVisible: false,
spinning: false,
detail: false,
queryParam: {
checkLocation: '',
checkPointCode: '',
deptId: null,
descs: '',
id: null,
timeLimit: null,
timeLimitUnit: 'MIN',
checkList: [],
checkPointEquipList: [],
checkPointItemList: [
{
checkContent: '',
id: null,
relation: true
}
]
},
isDetail: '',
usernameStr: '',
userInfo: getStore({ name: 'info' }),
rules: {
timeLimit: [{ required: true, message: '请选择', trigger: 'change' }],
deptId: [{ required: true, message: '请选择', trigger: 'change' }],
checkLocation: [{ required: true, message: '不能为空', trigger: 'blur' }]
}
}
},
created () {
},
methods: {
addFun () {
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.spinning = true
requestURLs.add(this.queryParam).then((res) => {
if (res.success) {
this.spinning = false
this.$message.success('提交成功')
this.clsoeFun()
}
})
} else {
console.log('error submit!!')
return false
}
})
},
changeDeptIdFun() {
requestURLs.listByDeptId(this.queryParam.deptId).then((res) => {
if (res.success) {
this.inspectDataList = res.data
console.log(res)
}
})
},
// 编辑 资金计划：
handleChange (value, key, column) {
console.log(value, key, column, '======')
// 是
},
// 添加
addContentRaw (list, index) {
list.push({
name: '',
key: Date.now()
})
},
// 删除
removeContentRaw (list, index) {
if (list.length === 1) {
this.$message.warning('至少保留一条内容!')
} else {
list.splice(index, 1)
}
},
}
}
</script>
<style lang="less" scoped>
/deep/.imgsClass .ant-form-item-control {
height: auto !important;
}
/deep/.ant-form-item-control {
height: 44px;
line-height: 44px;
}
/deep/.itextarealass .ant-form-item-control {
// height: auto !important;
height: 84px !important;
line-height: 24px !important;
}
/deep/.tableMakeClass{
padding: 0 10px;
}
/deep/.tableMakeClass .ant-table-pagination.ant-pagination{
display: none;
}
/deep/.tableMakeClass .ant-form-item-control {
height: 48px !important;
}
.tableMakeClass .ant-btn{
width: 30px;
height: 26px;
padding: 0;
border: none;
color: #56a3f1;
}
.tableMakeClass .ant-btn:hover{
background: #56a3f1;
color: #fff;
}
/deep/.tableMakeClass .ant-table .ant-table-tbody tr td{
padding: 0 30px;
}
/deep/.indexNexClass .ant-form-item-control-wrapper{
margin-left: 150px;
}
/deep/.itextarealass .ant-form-item-control {
// height: auto !important;
height: 84px !important;
line-height: 24px !important;
}
</style>
就这些了，具体的用法，都再里