el-form绑定的是一个对象,但在有些时候提交的表单中会有数组数据,校验有点不符合常理 例如这样的一个表单,付款方是个数组,这种怎么校验呢。上代码 用的循环el-form, :model绑定循环的item,也就是数组中的单个对象,然后prop绑定参数,rules正常写, 然后提交的时候,因为el-form是循环的,所以用ref绑定的fForm是一...
</el-form-item> <el-form-item label="数据表名称:" prop="sheet"> <el-input v-model="form.sheet" placeholder="请输入数据表名称"> </el-input> </el-form-item> </el-form> <script>import { Reg_w } from'@/utils/reg'exportdefault{ data() {//数据库表名校验let validatorSheet = (...
-- el-form重点双重嵌套, model绑定的是item,也就是array下的每一项,规则是新的, 因为是多个el-form,所以这里的itemRef是数组,验证规则请看methods --> <el-form :model="item" :rules="itemRules" ref="itemRef"> <!-- prop绑定的是array下每一项的key值 --> <el-form-item prop="go"> <el-...
// 表头数组数据 formHeader: [ { itemType: "text", // 输入框类型 labelName: "姓名", // 输入框名字 propName: "name", // 输入框字段名 isRequired: true, // 是否必填 placeholder: "请填写名字", // 输入框placeholder提示语加上,可用于告知用户规则 }, { itemType: "number", labelName:...
el-form校验数组表格 在Vue.js中使用Element UI的el-form和el-table进行数组表格的校验可以按照以下步骤进行: 1.在el-form中使用el-table,el-table中的数据绑定到一个数组属性上,例如dataList。 ```html <el-form :model="formData" ref="formDataRef" :rules="formRules" label-width="100px"> <el-...
// scriptruleForm:{yrmx:'',zjList:[{zjmc:'',// 组件名称bb:''// 版本},]},zjlbRules:{zjmc:[{required:true,message:'请选择组件',trigger:'change'}],bb:[{required:true,message:'请选择版本',trigger:'change'}],}, // style.special{display:flex;align-items:center;justify-content:spa...
为key3数组中的key3_key1值和key3_key2增加rules 第一步:设置<el-form-item>中key3_key1和key3_key2的prop值 <div v-for="(item, i) in form.key3"> <el-form-item label="key3_key1" label-width="100px" :prop="'key3.'+ i +'.key3_key1'"> <el-input v-model="item.key3_...
schema属性,每个表单项的配置数组,如下 本文代码后期可能较复杂,需要的话,可以去看github代码 当然文末也附上了,每个小节的具体代码,有需要也可以看看 TL;DR 就是写了个enhanced-el-form组件,充当原先的el-form组件 唯一不一样的是,rules换成schema,其他属性、事件、方法同el-form组件 ...
其它的提示没了吗？因为elform的校验是基于字段名进行的。在elform中遍历数组，并且只有一个输入框进行校验时，其它输入框的提示信息会被隐藏。这是因为elform的校验是基于字段名进行的，而在数组中的各个输入框的字段名是相同的。因此，当其中一个输入框进行校验时，其它输入框的校验状态也会被更新。
一、普通的值类型的数据校验 ①设置el-form-item 的 prop值 与formdata 中定义的 key保持一致` ②如果 rules 需要通过 el-form 统一设置,rules 的 key定义也与 prop 保持一致(如果不一致,需要在 el-form-item 中 手动指定) ③复杂的校验函数可通过validator单独定义 ...