from表单el-form-item绑定值为数组的prop写法

html部分

如下代码，prop绑定值理想写法应为list[groupIndex].name,但在这需要list.[groupIndex].name才能绑定成功

<el-form ref="form" :model="form"><el-form-item v-for="(item,groupIndex) in form.list" :key="groupIndex" :label="'组'+(groupIndex+1)+'：'" label-width="150px"><el-row><el-col :span="9"><el-form-item :prop="'list.'+groupIndex+'.name'" :rules="[{ validator: checkFood, trigger: 'change' }]"><el-select v-model="form.list[groupIndex].name" placeholder="请选择食物" clearable><el-optionv-for="(food,foodIndex) in ['番茄炒蛋','青椒炒肉','烧鸭','猪脚']":key="foodIndex":label="food":value="food"/></el-select></el-form-item></el-col><el-col :span="9" :offset="4"><el-form-item :prop="'list.'+groupIndex+'.num'" :rules="[{ validator: checkNum, trigger: 'change' }]"><el-select v-model.number="form.list[groupIndex].num" placeholder="请选择数量" clearable><el-option v-for="num in [1,2,3,4]" :key="num" :label="num" :value="num" /></el-select></el-form-item></el-col></el-row></el-form-item></el-form>

js部分

<script>
export default {data() {return {form: {list: [{'name': '','num': null},{'name': '','num': null},{'name': '','num': null},{'name': '','num': null}]},checkFood: (rule, value, callback) => {const arr = rule.field.split('.')// field: prop的值,list.0.nameif (!value && !this.form.list[arr[1]]['num']) { // 两个值都为空this.$refs.form.clearValidate(arr[0] + '.' + arr[1] + '.' + 'num')callback()} else if (!value && this.form.list[arr[1]]['num']) {callback(new Error('请选择食物数量'))} else {callback()}},checkNum: (rule, value, callback) => {const arr = rule.field.split('.')if (!value && !this.form.list[arr[1]]['name']) {this.$refs.form.clearValidate(arr[0] + '.' + arr[1] + '.' + 'name')callback()} else if (!value && this.form.list[arr[1]]['name']) {callback(new Error('请选择食物'))} else if (this.accout > 4) {callback(new Error('数量总和不大于4'))} else {callback()}}}}
}
</script>

from表单el-form-item绑定值为数组的prop写法相关推荐

一天搞定CSS：表单（form）--20
1.表单标签 2.input标签属性与取值代码演示 <!DOCTYPE html> <html><head><meta charset="UTF- ...
用 Javascript 验证表单（form）中多选框（checkbox）值
和单选框一样,许多新手在用 Javascript 验证表单(form)中多选框(checkbox)的值时,都会遇到问题,原因是 checkbox 和普通的文本框在获取值的时候有很大不同,本文介绍了一个 ...
使用jquery.form.js提交表单并获取后台返回值
使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的值提交到后台 1.前台js代码 //使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的 ...
《uni-app》表单组件-form表单
本文分享的Form组件为uni-app的内置组件Form,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组件-form表单 ...
SpringMVC表单请求参数的绑定，配置编码过滤器解决请求参数中文乱码问题，自定义类型转换器
文章目录 SpringMVC的参数绑定支持的数据类型基本数据类型和字符串类型 JavaBean 包装类 Map类型 List类型 POST请求参数中文乱码的解决方法自定义类型转换器(Date类 ...
HTML 表单（form）使用详解
一.表单 1.表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 2.表单的工作机制 3.表单定义(<form>< ...
JEPaas代码_((表单）_输入字段值而改变值)
JEPaas代码_笔记((表单)_输入字段值而改变值) 我也是新手入门,不是很熟练JEPaas后台,正在学习中- var v=parseInt(value);console.warn('出库数量改变' ...
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
$(function () {var wait = $("<img src=\"\" alt=\"正在上传\"/>");$(&q ...
Django笔记 —— 表单（form）
最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...

from表单el-form-item绑定值为数组的prop写法

html部分

js部分

from表单el-form-item绑定值为数组的prop写法相关推荐

最新文章

热门文章