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