問題描述
使用antd的form-model的rules表單校驗(yàn)
那如圖表格中的input如何也一同校驗(yàn)？
如圖可見規(guī)則是一個數(shù)據(jù)結(jié)構(gòu)為二維數(shù)組的可動態(tài)生成的表格，如何對其中的input進(jìn)行校驗(yàn)？
一維數(shù)組表格校驗(yàn)分析
先分析簡單點(diǎn)的問題，表格是數(shù)組，且input是放在插槽里的，如何進(jìn)行校驗(yàn)？
代碼中editParam為表單校驗(yàn)的整體對象
editParam.jobSetInfoDetails為表格用到的數(shù)組
二維數(shù)組表格校驗(yàn)分析
個人理解猜測
我猜測表單校驗(yàn)就是對form所綁定對象key->value的校驗(yàn)
prop是要讓你找到校驗(yàn)?zāi)繕?biāo)屬性的key
input v-model綁定的是value
數(shù)組的只要通過index找到目標(biāo)對象的屬性，通過拼接字符串的方式放到prop里即可文章來源：http://www.zghlxwxcb.cn/news/detail-400402.html
代碼
我本身不喜歡在筆記中直接貼全文代碼的行為，但是這個表單比較簡單，且參考性不錯（有動態(tài)表格的校驗(yàn)），就直接貼全了文章來源地址http://www.zghlxwxcb.cn/news/detail-400402.html
<template>
<div class="main">
<a-card title="新建規(guī)則" :bordered="true" class="edit-box">
<a-button slot="extra" href="#" type="primary" @click="submit">確定創(chuàng)建</a-button>
<p class="subTitle">規(guī)則基本信息</p>
<a-divider style="height: 2px; margin-top: 10px; margin-bottom: 10px" />
<a-form-model
ref="ruleForm"
:model="editParam"
class="form-box"
labelAlign="left"
:rules="rules"
>
<a-row>
<a-col>
<a-form-model-item
class="form_lineHeight"
prop="name"
label="規(guī)則名稱"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 6 }"
>
<a-input allowClear placeholder="" v-model="editParam.name" />
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-model-item
class="form_lineHeight"
prop="operator"
label="規(guī)則創(chuàng)建人"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 6 }"
>
<a-input allowClear placeholder="" v-model="editParam.operator" />
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-model-item
class="form_lineHeight"
prop="comment"
label="規(guī)則說明"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 15 }"
>
<a-input allowClear placeholder="" v-model="editParam.comment" />
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-model-item
class="form_lineHeight"
prop="impact"
label="告警影響"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 15 }"
>
<a-input allowClear placeholder="" v-model="editParam.impact" />
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-model-item
class="form_lineHeight"
prop="manual"
label="告警后處理措施"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 15 }"
>
<a-input allowClear placeholder="" v-model="editParam.manual" />
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-model-item
class="form_lineHeight"
prop="owner"
label="告警責(zé)任人或聯(lián)系人"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 15 }"
>
<a-input allowClear placeholder="" v-model="editParam.owner" />
</a-form-model-item>
</a-col>
</a-row>
<div class="mid">
<p class="subTitle">規(guī)則編寫</p>
<a-divider style="height: 2px; margin-top: 10px; margin-bottom: 10px" />
<div
class="table"
v-for="(item, i) in editParam.alertLogicalFilterConfig.alertFilterConfigs"
:key="i"
>
<div>
<span>規(guī)則{{ i + 1 }}</span>
<a-button class="addRulesButton" @click="addRulesTable(i)" icon="plus" size="small">
</a-button>
<a-button class="addRulesButton" @click="delRulesTable(i)" icon="minus" size="small">
</a-button>
</div>
<el-table :data="item" :border="true">
<el-table-column label="序號" type="index" :index="1" width="50"> </el-table-column>
<el-table-column label="字段名稱">
<template slot-scope="scope">
<a-select v-model="scope.row.key" style="width: 160px">
<a-select-option value="area"> 數(shù)據(jù)中心 </a-select-option>
<a-select-option value="nodeIp"> 節(jié)點(diǎn) </a-select-option>
<a-select-option value="nodeAlias"> 節(jié)點(diǎn)別名 </a-select-option>
<a-select-option value="summary"> 摘要 </a-select-option>
<a-select-option value="category"> 管理對象類別 </a-select-option>
<a-select-option value="kind"> 管理對象組件 </a-select-option>
<a-select-option value="type"> 管理對象 </a-select-option>
</a-select>
</template>
</el-table-column>
<el-table-column label="條件">
<template slot-scope="scope">
<a-select v-model="scope.row.filterType" style="width: 160px">
<a-select-option value="等于"> 等于 </a-select-option>
<a-select-option value="不等于"> 不等于 </a-select-option>
<a-select-option value="包含"> 包含 </a-select-option>
<a-select-option value="不包含"> 不包含 </a-select-option>
<a-select-option value="正則匹配"> 正則匹配 </a-select-option>
<a-select-option value="正則反向匹配"> 正則反向匹配 </a-select-option>
</a-select>
</template>
</el-table-column>
<el-table-column label="值域">
<template slot-scope="scope">
<a-form-model-item
:prop="
'alertLogicalFilterConfig.alertFilterConfigs.' +
i +
'.' +
scope.$index +
'.val'
"
class="rulesval"
:rules="{ required: true, message: '必填', trigger: 'blur' }"
>
<a-input v-model="scope.row.val"></a-input>
</a-form-model-item>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="addRules(i, scope.$index)">添加</el-button>
<el-button size="mini" type="danger" @click="deleteRules(i, scope.$index)"
>刪除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="bottom">
<p class="subTitle">執(zhí)行操作</p>
<a-divider style="height: 2px; margin-top: 10px; margin-bottom: 10px" />
<el-table :data="editParam.jobSetInfoDetails" class="tasksTable" :border="true">
<el-table-column label="任務(wù)id">
<template slot-scope="scope">
<a-form-model-item
:prop="'jobSetInfoDetails.' + scope.$index + '.jobSetId'"
class="rulesval"
:rules="{ required: true, message: '必填', trigger: 'blur' }"
>
<a-input v-model="scope.row.jobSetId"></a-input>
</a-form-model-item>
</template>
</el-table-column>
<el-table-column label="任務(wù)名稱">
<template slot-scope="scope">
<a-form-model-item
:prop="'jobSetInfoDetails.' + scope.$index + '.jobSetName'"
class="rulesval"
:rules="{ required: true, message: '必填', trigger: 'blur' }"
>
<a-input v-model="scope.row.jobSetName"></a-input>
</a-form-model-item>
</template>
</el-table-column>
<el-table-column label="任務(wù)描述">
<template slot-scope="scope">
<a-form-model-item
:prop="'jobSetInfoDetails.' + scope.$index + '.jobSetDescription'"
class="rulesval"
:rules="{ required: true, message: '必填', trigger: 'blur' }"
>
<a-input v-model="scope.row.jobSetDescription"></a-input>
</a-form-model-item>
</template>
</el-table-column>
<el-table-column label="任務(wù)類型">
<template slot-scope="scope">
<a-select v-model="scope.row.jobType" style="width: 160px">
<a-select-option value="zz"> 自證 </a-select-option>
<a-select-option value="bc"> 撥測 </a-select-option>
</a-select>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="addTasks(scope.$index)">添加</el-button>
<el-button
v-show="showDelTasksButton"
size="mini"
type="danger"
@click="deleteTasks(scope.$index)"
>刪除</el-button
>
</template>
</el-table-column>
</el-table>
<a-button class="addTasksButton" @click="addTasks(0)" v-if="showAddTasksButton"
>添加任務(wù)</a-button
>
</div>
</a-form-model>
</a-card>
</div>
</template>
<script>
//import
import { addAlertJobTriggerRule } from '@/views/eventList/rulesManage/rulesManageApi.js'
export default {
components: {},
data() {
return {
editParam: {
id: undefined, //規(guī)則編號
name: undefined, //規(guī)則名稱
operator: this.$store.state.user.username, //規(guī)則創(chuàng)建人
comment: undefined, //規(guī)則說明
impact: undefined, //告警影響
manual: undefined, //告警后處理措施
owner: undefined, //告警責(zé)任人或聯(lián)系人
alertLogicalFilterConfig: {
alertFilterConfigs: [
//這里為了便于后續(xù)理解，只是注釋暫不刪除
[
{
key: 'area', //字段名稱
filterType: '等于', //條件
val: '', //值域
},
],
],
operateType: '||',
},
jobSetInfoDetails: [
{
jobSetId: '',
jobSetName: '',
jobSetDescription: '',
jobType: 'bc',
},
],
},
rules: {
name: [{ required: true, message: '必填', trigger: 'change' }],
operator: [{ required: true, message: '必填', trigger: 'change' }],
comment: [{ required: true, message: '必填', trigger: 'change' }],
impact: [{ required: true, message: '必填', trigger: 'change' }],
owner: [{ required: true, message: '必填', trigger: 'change' }],
},
showDelTasksButton: true,
}
},
computed: {
showAddTasksButton() {
return this.editParam.jobSetInfoDetails.length == 0
},
},
watch: {
'editParam.tasks'(value) {
if (value.length == 1) {
this.showDelTasksButton = false
} else {
this.showDelTasksButton = true
}
},
},
methods: {
async submit() {
this.$refs.ruleForm.validate(async (valid) => {
if (valid) {
//發(fā)起創(chuàng)建規(guī)則請求
let res = await addAlertJobTriggerRule(this.editParam)
//規(guī)則創(chuàng)建成功
if (res.code == 0) {
this.$success({
title: '規(guī)則創(chuàng)建成功',
okText: '確定',
okType: 'primary',
onOk() {
window.location.href = 'about:blank'
window.close()
},
})
}
} else {
console.log('error submit!!')
return false
}
})
},
addRulesTable(tableIndex) {
let tmp = [
{
key: 'area', //字段名稱
filterType: '等于', //條件
val: '', //值域
},
]
this.editParam.alertLogicalFilterConfig.alertFilterConfigs.splice(tableIndex + 1, 0, tmp)
},
delRulesTable(tableIndex) {
this.editParam.alertLogicalFilterConfig.alertFilterConfigs.splice(tableIndex, 1)
},
addRules(tableIndex, ruleIndex) {
let tmp = {
key: 'area', //字段名稱
filterType: '等于', //條件
val: '', //值域
}
this.editParam.alertLogicalFilterConfig.alertFilterConfigs[tableIndex].splice(
ruleIndex + 1,
0,
tmp
)
},
deleteRules(tableIndex, ruleIndex) {
this.editParam.alertLogicalFilterConfig.alertFilterConfigs[tableIndex].splice(ruleIndex, 1)
//如果該規(guī)則是規(guī)則表格中最后一條，則刪除該規(guī)則表格
if (this.editParam.alertLogicalFilterConfig.alertFilterConfigs[tableIndex].length == 0) {
this.editParam.alertLogicalFilterConfig.alertFilterConfigs.splice(tableIndex, 1)
}
},
addTasks(index) {
let tmp = {
taskId: '插入的任務(wù)id',
taskName: '任務(wù)名稱',
describe: '任務(wù)描述',
uri: '任務(wù)URI',
}
this.editParam.jobSetInfoDetails.splice(index + 1, 0, tmp)
},
deleteTasks(index) {
this.editParam.jobSetInfoDetails.splice(index, 1)
},
},
created() {},
//生命周期 - 掛載完成（可以訪問DOM元素）
mounted() {},
}
</script>
到了這里，關(guān)于form rules校驗(yàn)：動態(tài)table中input校驗(yàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
