最近项目需要做巡检相关的功能，用到的表单表格比较多，加上各种验证快玩出了花，倒不是难，就是挺繁琐的，记录一下比较基础的写法。
1.表单嵌套表格的验证：
如图，表单被分为了一个可以动态增减的表格和普通的表单两部分，且表格是遍历出来的，内容是必选项，这样验证项目必须要直接写在遍历的地方，表格的增删就不说了直接push和splice就好，废话不说，上代码
<el-form ref="form" :model="form" size="small" :rules="rules">
<div class="drawerBox dialogBox">
<div class="innerBox">
<p class="p-title" style="margin-bottom:10px">基础信息</p>
<el-row>
<el-col :span="10">
<el-form-item
label-width="100px"
label="班次名称："
prop="name"
>
<el-input v-model="form.name" placeholder="请输入"/>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item
label-width="100px"
label=""
prop="cycle_days"
>
每<el-input-number v-model="form.cycle_days" controls-position="right" style="width:107px;margin:0 10px;" :min="1" placeholder="请输入"/>天为一个单次循环周期
</el-form-item>
</el-col>
</el-row>
</div>
<div class="innerBox">
<p class="p-title" style="margin-bottom:10px">班次表</p>
<el-table
:data="form.patrol_scheme_details"
header-row-class-name="table-head"
row-class-name="table-body"
stripe
>
<el-table-column
label="天数"
>
<template slot-scope="scope">
<el-form-item
:prop="'patrol_scheme_details.' + scope.$index+ '.scheme_day'"
:rules="{
required: true, message: '请选择', trigger: 'change'
}"
>
<el-select v-model="scope.row.scheme_day" style="width:126px;" placeholder="请选择">
<el-option
v-for="item in dayOption"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="巡检时段">
<template slot-scope="scope">
<el-form-item
:prop="'patrol_scheme_details.' + scope.$index+ '.time_slot'"
:rules="{
required: true, message: '请选择', trigger: 'change'
}"
>
<el-select v-model="scope.row.time_slot" style="width:166px;" placeholder="请选择">
<el-option
v-for="item in slotOption"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="执行人员">
<template slot-scope="scope">
<el-form-item
:prop="'patrol_scheme_details.' + scope.$index+ '.persons'"
:rules="{
required: true, message: '请选择', trigger: 'change'
}"
>
<el-select v-model="scope.row.persons" multiple style="width:225px;" collapse-tags placeholder="请选择">
<el-option
v-for="item in userOption"
:key="item.id"
:label="item.full_name ? item.full_name : item.username"
:value="item.id"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column
v-if="$route.meta.privileges.includes('Edit')"
prop="op"
label="操作"
width="80"
>
<template slot-scope="scope">
<el-button type="text" @click.native="delRow(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button
class="add-button"
@click="addRow()"
>
<i class="el-icon-plus"/> 单次循环班次
</el-button>
</div>
</div>
</el-form>
export default {
data() {
return {
form: {
'name': '', // 必须，班次名字
'cycle_days': 1, // 循环周期，天数
'patrol_scheme_details': [
{
'scheme_day': 1, // 第几天，排版日
'time_slot': '', // 排版时段，选择项
'persons': [] // 巡检人ID列表,多选数组
}
]
},
rules: {
name: [{ required: true, message: '请输入', trigger: 'blur' }],
cycle_days: [{ required: true, message: '请输入', trigger: 'blur' }]
},
slotOption: [],
userOption: []
}
},
}
其实主要看这几句就可以
这样动态验证就完成了。
2.时间选择器限制
两个时间选择器，第一个只能选今天及以后的日期范围，第二个只能选第一个选的日期范围中的日期。
只能选今天及以后，第一个选了10-15号
<el-form-item
label="起止时间："
>
<el-date-picker
v-model="form.schemeDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small"
format="yyyy-MM-dd"
:clearable="false"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions2"
/>
</el-form-item>
pickerOptions2: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7
}
}
只能从10-15号中选一天
<el-form-item>
<el-date-picker
v-model="scope.row.scheme_date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
:clearable="false"
:picker-options="pickerOptions"
/>
</el-form-item>
computed: {
pickerOptions() {
var self = this
return {
disabledDate(time) {
return time.getTime() < new Date(self.form.schemeDate[0]).getTime() - 8.64e7 || time.getTime() > new Date(self.form.schemeDate[1]).getTime()
}
}
},
}
网友评论