一、一重数组的绑定
提示:
1、每一项el-form-item的prop以及rules的赋值以及data中form的结构(行内样式是为了复制直接看效果)
2、注意看users以及mobile的prop绑定的值不一样的,因此当只有一重数组时这两种写法都是可以的
:prop="'users[' + index + '].userName'"
:prop="'users.' + index + '.mobile'"
结构如下代码所示:
template
<!--
* @Description: ------ 文件描述 ------
* @Creater: snows_l [email protected]
* @Date: 2023-02-12 14:02:00
* @LastEditors: snows_l [email protected]
* @LastEditTime: 2023-02-12 14:24:00
* @FilePath: /vue2-js/src/components/elForm.vue
-->
<template>
<div class="container-warp">
<el-form :model="form" ref="form" :rules="rules" label-width="240px" :inline="false" size="normal">
<el-form-item label="联系人及手机号码">
<div class="name-phone">
<div
style="display: flex; align-items: center"
class="item"
v-for="(item, index) in form.users"
:key="item.id">
<el-form-item :prop="'users[' + index + '].userName'" :rules="rules.userName">
<el-input v-model="item.userName" size="small" placeholder="请输入联系人" />
</el-form-item>
<el-form-item style="margin: 0 10px" :prop="'users.' + index + '.mobile'" :rules="rules.mobile">
<el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
</el-form-item>
<i
style="font-size: 20px"
class="icon"
:class="index == 0 ? 'el-icon-circle-plus-outline' : 'el-icon-circle-close'"
@click="addUser(index)"></i>
</div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
script
<script>
export default {
name: '',
data() {
return {
form: {
users: [
{
userName: '',
mobile: null
}
],
otherInfn: null
},
rules: {
userName: [{ required: true, message: '请输入联系人' }],
mobile: [{ required: true, message: '请输入手机号' }]
}
};
},
created() {},
methods: {
onSubmit() {
console.log('-------- form --------', this.form);
this.$refs['form'].validate(valid => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
<style scoped>
.container-warp {
width: 100%;
height: 100%;
}
</style>
二、二重数组的绑定
提示:
1、注意看users以及mobile的prop绑定的值不一样的,因此当只有一重数组时这两种写法都是可以的
:prop="'users[' + index + '].list[' + i + '].attr2'"
:prop="'users.' + index + '.list.' + i + '.attr1'"
结构如下代码所示:
template
<!--
* @Description: ------ 文件描述 ------
* @Creater: snows_l [email protected]
* @Date: 2023-02-12 14:02:00
* @LastEditors: snows_l [email protected]
* @LastEditTime: 2023-02-22 16:39:30
* @FilePath: /vue2-js/src/components/elForm.vue
-->
<template>
<div class="container-warp">
<el-form
:model="form"
ref="form"
:rules="rules"
label-width="240px"
label-position="top"
:inline="false"
size="normal">
<el-form-item label="基础信息users">
<div class="name-phone">
<!-- 第一重数组 -->
<div class="item" v-for="(item, index) in form.users" :key="item.id">
<el-form-item
label="联系人"
label-position="right"
:prop="'users[' + index + '].userName'"
:rules="rules.userName">
<el-input v-model="item.userName" size="small" placeholder="请输入联系人" />
</el-form-item>
<el-form-item
label="手机号"
label-position="right"
style="margin: 0 10px"
:prop="'users.' + index + '.mobile'"
:rules="rules.mobile">
<el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
</el-form-item>
<!-- 第二重数组 -->
<el-form-item label="其他信息List" style="margin: 40px">
<div
class="other-info-container"
style="display: flex"
v-for="(single, i) in form.users[index].list"
:key="i">
<el-form-item
style="margin-right: 20px"
label="其他信息1"
size="normal"
:prop="'users.' + index + '.list.' + i + '.attr1'"
:rules="rules.attr1">
<el-input v-model="single.attr1" size="small" placeholder="请输入其他信息1" />
</el-form-item>
<el-form-item
label="其他信息2"
size="normal"
:prop="'users[' + index + '].list[' + i + '].attr2'"
:rules="rules.attr2">
<el-input v-model="single.attr2" size="small" placeholder="请输入其他信息2" />
</el-form-item>
</div>
</el-form-item>
</div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
script
<script>
export default {
name: '',
data() {
return {
form: {
users: [
{
userName: '',
mobile: null,
otherInfn: null,
list: [
{ attr1: null, attr2: null },
{ attr1: null, attr2: null }
]
}
],
otherInfn: null
},
rules: {
userName: [{ required: true, message: '请输入联系人' }],
mobile: [{ required: true, message: '请输入手机号' }],
attr1: [{ required: true, message: '请输入其他信息1' }],
attr2: [{ required: true, message: '请输入其他信息2' }]
}
};
},
created() {},
methods: {
onSubmit() {
console.log('-------- form --------', this.form);
this.$refs['form'].validate(valid => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
<style scoped>
.container-warp {
width: 100%;
height: 100%;
}
</style>
三、效果如如下:(就随便弄了下不要在乎样式[/手动狗头])
图1
图2
图3
三、vue完整文件
<!--
* @Description: ------ 文件描述 ------
* @Creater: snows_l [email protected]
* @Date: 2023-02-12 14:02:00
* @LastEditors: snows_l [email protected]
* @LastEditTime: 2023-02-22 16:39:30
* @FilePath: /vue2-js/src/components/elForm.vue
-->
<template>
<div class="container-warp">
<el-form
:model="form"
ref="form"
:rules="rules"
label-width="240px"
label-position="top"
:inline="false"
size="normal">
<el-form-item label="验证数据">
<el-input
v-model="form.data"
@input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
placeholder="请输入"
size="normal"></el-input>
</el-form-item>
<el-form-item label="基础信息users">
<div class="name-phone">
<!-- 第一重数组 -->
<div class="item" v-for="(item, index) in form.users" :key="item.id">
<el-form-item
label="联系人"
label-position="right"
:prop="'users[' + index + '].userName'"
:rules="rules.userName">
<el-input v-model="item.userName" size="small" placeholder="请输入联系人" />
</el-form-item>
<el-form-item
label="手机号"
label-position="right"
style="margin: 0 10px"
:prop="'users.' + index + '.mobile'"
:rules="rules.mobile">
<el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
</el-form-item>
<!-- 第二重数组 -->
<el-form-item label="其他信息List" style="margin: 40px">
<div
class="other-info-container"
style="display: flex"
v-for="(single, i) in form.users[index].list"
:key="i">
<el-form-item
style="margin-right: 20px"
label="其他信息1"
size="normal"
:prop="'users.' + index + '.list.' + i + '.attr1'"
:rules="rules.attr1">
<el-input v-model="single.attr1" size="small" placeholder="请输入其他信息1" />
</el-form-item>
<el-form-item
label="其他信息2"
size="normal"
:prop="'users[' + index + '].list[' + i + '].attr2'"
:rules="rules.attr2">
<el-input v-model="single.attr2" size="small" placeholder="请输入其他信息2" />
</el-form-item>
</div>
</el-form-item>
</div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
form: {
data: '',
users: [
{
userName: '',
mobile: null,
otherInfn: null,
list: [
{ attr1: null, attr2: null },
{ attr1: null, attr2: null }
]
},
{
userName: '',
mobile: null,
otherInfn: null,
list: [
{ attr1: null, attr2: null },
{ attr1: null, attr2: null }
]
}
],
otherInfn: null
},
rules: {
userName: [{ required: true, message: '请输入联系人' }],
mobile: [{ required: true, message: '请输入手机号' }],
attr1: [{ required: true, message: '请输入其他信息1' }],
attr2: [{ required: true, message: '请输入其他信息2' }]
}
};
},
created() {},
methods: {
onSubmit() {
console.log('-------- form --------', this.form);
this.$refs['form'].validate(valid => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
changeData(e) {
console.log('-------- e --------', e);
}
}
};
</script>
<style scoped>
.el-input {
max-width: 400px;
}
</style>
五、总结:
prop的绑定就有上文提到的这两种方式,因此不管是几重数组都是可以的(当然没有试过三重四重数组, 应该是可以的,当然项目中应该不会出现这种情况)