vue component elementUI的表单验证

Bonnie
  • 204

我自己写了一个alert的组件,里面是一个表单数据,我的大概思路如下:
通过父组件传递子组件需要的表单展示,比如我会定义一个数组{name:"",value:"",type:""}通过type定义表单是text、areatext、select等等,如果有value值,子组件就通过v-modle="item.value"这样绑定。
但是现在的一个问题是,我无法实现 表单验证
问题就是我现在发现我无法把v-model与value对等,进而无法实现表单验证。v-model传过来是一个值,不是一个变量。我这边输入的值,也无法跟具体的变量对应,尽而无法实现验证。
我的alert表单代码如下
<div id="alert">

    <el-dialog :title="alertTitle" :visible.sync="dialogFormVisible" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" size="small" id="alertForm">
            <el-form-item :label="item.option"  v-for="(item,index) in lists" :key="item.name" :prop="item.name" :rules="item.rules">
                <el-input  auto-complete="off"
                           class="input_text"
                           v-if="item.type==1"
                           :name="item.name"
                           v-model="item.value"
                           :disabled="disabled"
                ></el-input>
                <el-select
                        style="width:100%"
                        v-else-if="item.type==2"
                        :name="item.name"
                        placeholder="请选择"
                        v-model="item.value"
                        :disabled="disabled"
                >
                    <el-option
                            v-for="list in item.options"
                            :key="list.key"
                            :value="list.value"
                            >
                    </el-option>
                </el-select>
                <el-input
                        auto-complete="off"
                        type="textarea"
                        v-else-if="item.type==3"
                        :name="item.name"
                        v-model="item.value"
                        :disabled="disabled"
                ></el-input>
                <el-date-picker
                        v-else-if="item.type==4"
                        :name="item.name"
                        v-model="item.value"
                        :default-value="item.value"
                        :disabled="disabled"
                        type="datetime"
                        placeholder="选择日期"
                        format="yyyy 年 MM 月 dd 日 HH : mm : ss"
                        value-format="yyyyMMddHHmmss"
                       >
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="isModify">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" v-if="isCreate">新增</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" v-else>修改</el-button>
        </div>
        <div slot="footer" class="dialog-footer" v-else>
            <el-button type="primary" @click="dialogFormVisible = false">返回</el-button>
        </div>
    </el-dialog>
</div>
回复
阅读 2.6k
1 个回答
✓ 已被采纳

讲真,不太理解题主想表达的。。。建议以后提问尽量简化,不需要的代码可以删除(比如前面ele自己的提供的案例)
圈重点:ele的表单验证对应的是el-form-item标签的prop变量,验证的值是绑定的v-model的值,需要注意的是prop变量必须是el-form标签绑定的:data对象的属性,否则也无法验证

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏