vue antUI - 列表表单验证，

一般的表单验证，需要提交的数据是是一个对象类似于下面的样子，

formData:{
	name: '',
	age: '',
	phone: ''
}
1
2
3
4
5

但是我们经常会碰到这样是数据结构,我们去验证下面图片的列表里每一个字段的填写状态时，之前的绑定porp的方式就不灵了，需要处理一下。

其实官网上面是有类似的例子的 antUI表单提交ui

很多人都没找到，我也是那天被产品逼着，弄出来的，一开始去百度的，查不到，后面就试着去看官网，一个一个的看，看到最后的时候，发现里面竟然有，稍微改造一下就弄好了，现在分享给大家。
这是官网的截图

formData:{
	name: '',
	age: '',
	phone: ''，
	familyList: [
		{
			name: '',
			age: '',
			phone: ''，
		}
	]
}
1
2
3
4
5
6
7
8
9
10
11
12

这是我做的，点击提交会对每个填写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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355

就这些了，具体的用法，都再里