elementui 嵌套表单验证_elementUI 表单嵌套表格验证,日期选择器联动限制等写法

最近项目需要做巡检相关的功能，用到的表单表格比较多，加上各种验证快玩出了花，倒不是难，就是挺繁琐的，记录一下比较基础的写法。

1.表单嵌套表格的验证：

如图，表单被分为了一个可以动态增减的表格和普通的表单两部分，且表格是遍历出来的，内容是必选项，这样验证项目必须要直接写在遍历的地方，表格的增删就不说了直接push和splice就好，废话不说，上代码

基础信息

label-width="100px"

label="班次名称："

prop="name"

label-width="100px"

label=""

prop="cycle_days"

每天为一个单次循环周期

班次表

:data="form.patrol_scheme_details"

header-row-class-name="table-head"

row-class-name="table-body"

stripe

label="天数"

:prop="'patrol_scheme_details.' + scope.$index+ '.scheme_day'"

:rules="{

required: true, message: '请选择', trigger: 'change'

v-for="item in dayOption"

:key="item.value"

:label="item.label"

:value="item.value"

:prop="'patrol_scheme_details.' + scope.$index+ '.time_slot'"

:rules="{

required: true, message: '请选择', trigger: 'change'

v-for="item in slotOption"

:key="item.value"

:label="item.label"

:value="item.value"

:prop="'patrol_scheme_details.' + scope.$index+ '.persons'"

:rules="{

required: true, message: '请选择', trigger: 'change'

v-for="item in userOption"

:key="item.id"

:label="item.full_name ? item.full_name : item.username"

:value="item.id"

v-if="$route.meta.privileges.includes('Edit')"

prop="op"

label="操作"

width="80"

删除

class="add-button"

@click="addRow()"

单次循环班次

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号

label="起止时间："

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"

pickerOptions2: {

disabledDate(time) {

return time.getTime() < Date.now() - 8.64e7

}

只能从10-15号中选一天

v-model="scope.row.scheme_date"

value-format="yyyy-MM-dd"

placeholder="选择日期"

:clearable="false"

:picker-options="pickerOptions"

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()

}

elementui 嵌套表单验证_elementUI 表单嵌套表格验证,日期选择器联动限制等写法相关推荐

elementui中有导出组件吗_Element-ui组件库Table表格导出Excel表格
安装 npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsx https://github ...
table中加表单元素怎么验证_使用element-ui +Vue 解决 table 里包含表单验证的问题...
应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item ...
vue 数组中嵌套数组_vue+element-ui表单校验之数组多层嵌套
表单校验两层数组嵌套 :prop="'collectKidDtoList.'+index+'.collectKid.'+i+'.collectCode'" :rules=" ...
table中加表单元素怎么验证_element-ui 解决 table 里包含表单验证的问题！
实际项目中的场景,需要在table里做表单的验证,如图效果: 其实问题关键就在于如何给el-form-item动态绑定prop :prop="'tableData.' + scope.$in ...
element-ui表单验证（验证手机号是否正确，自定义验证规则）
效果图 1. html <el-form :model="userForm"status-icon:rules="rules"class="lo ...
重置表单验证清除表单校验信息
重置表单验证清除表单校验信息提交表单验证的时间经常遇见的一个问题再次打开时表单验证依旧存在,这种就很烦,用户体验有点差, 在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原 ...
elementUI弹框form多元素表单问题 - 抛砖篇
疑问1:elementUI的这个MessageBox弹框能否添加多个表单元素? 疑问2:如果能添加多个,怎么添加? 疑问3:使用el-dialog组件如何调用? 通过上述实践,总结发现还是使用el-d ...
vue + element-ui 对登录功能、重置表单、退出功能、路由重定向、挂载路由导航守卫的实现
vue + element-ui 对登录功能.重置表单.退出功能.路由重定向.挂载路由导航守卫的实现表单验证规则: 重置表单和对登录功能的验证: 路由重定向: 挂载路由导航守卫: 退出功能的实现 ...
3.4 《数据库系统概论》之数据查询---SELECT（单表查询、连接查询、嵌套查询、集合查询、多表查询）
文章目录 0.前言 1.思维导图 2.Student/SC/Course表数据及结构 3.SELECT语句的一般格式 4.单表查询 (1)选择表中的若干列 ① 查询指定列 ② 查询全部列 ③ 查询经过 ...

elementui 嵌套表单验证_elementUI 表单嵌套表格验证,日期选择器联动限制等写法

elementui 嵌套表单验证_elementUI 表单嵌套表格验证,日期选择器联动限制等写法相关推荐

最新文章

热门文章