elementUI中表单验证el-form-item嵌套包含多个prop

在element-ui的el-form中，如果要重置一个表单的话，可以用resetFields方法，先看下面的例子：<template><div><el-form :inline="true" :model="formInline" class="demo-form-inline " ref="form"><el-form-item label="输入姓名

liu__software

6173人浏览 · 2022-05-20 13:55:35

liu__software · 2022-05-20 13:55:35 发布

在element-ui的el-form中，如果要重置一个表单的话，可以用resetFields方法，先看下面的例子：

<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline " ref="form">
            <el-form-item label="输入姓名" prop='name'>
    <el-input v-model="formInline.name" placeholder="输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
    <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        name: 'aaa',
        methods: {
            onReset(){
    this.$refs.form.resetFields();
            },
        },
        data() {
            return {
    formInline: {},
            }
        }
    }
</script>

如果想让resetFields方法有效果，必须要在el-form-item上增加prop字段，且和v-model的属性对应：

但是有些时候一个el-form-item可能包含多个输入框：

代码结构：

<el-form-item label="金额范围" class='both_input' >
    <el-col :span="11">
            <el-input v-model="formInline.comsionStart" placeholder="从" ></el-input>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
            <el-input v-model="formInline.comsionEnd" placeholder="至"></el-input>
    </el-col>
</el-form-item>

el-form-item上只能加一个prop(可自定义校验多个字段)，那么如何才能重置内部的两个字段呢？

其实只要在el-col内再嵌一个el-form-item就好了，代码如下：

<el-form-item label="金额范围" class='both_input' >
    <el-col :span="11">
        <el-form-item prop='comsionStart' >
            <el-input v-model="formInline.comsionStart" placeholder="从" ></el-input>
        </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
        <el-form-item prop='comsionEnd'>
            <el-input v-model="formInline.comsionEnd" placeholder="至"></el-input>
        </el-form-item>
    </el-col>
</el-form-item>

其实这个在element-ui的官网上有，但是很隐蔽，是新手比较容易犯迷糊的地方，特此记录一下。

转载于：http://www.qiutianaimeili.com/html/page/2019/09/b1j1whvlpyc.html