能绑定的格式:
let a = {
a:1,
b:1
}
<t-form :data="a"/>
不能绑定的格式得手动写循环
let a = [
{a;1,b:1},
{a:1,b:1}
]
<t-form>
<t-form-item v-for....>
<t-form/>
这种时候如何触发校验
<t-form>
<!-- h5自定义属性 data-validate 必填且未填写 -->
<t-form-item
class="subFormItem"
v-for="(formItem, formIndex) in list"
:key="formIndex"
:data-validate="!formItem.value? 'validate-error' : ''"
:label="formItem.argName"
>
<t-form/>
validateAllForm() {
// 寻找所有的form-item表单,形成它们的dom集合
const mainForm = this.$refs.mainForm;
const subFormItemList = mainForm.getElementsByClassName('subFormItem');
// 遍历集合,根据dom上的自定义HTML参数判断是否必填且未填写,如果是,则根据dom找vue实例,触发validate显示
let bol = true;
for (const item of subFormItemList) {
if (item.dataset.validate === 'validate-error') {
item?.__vue__?.setValidateMessage([{ type: 'error', message: '请输入' }]);
bol = false;
}
}
return bol;
},
使用html的自定义dom参数,:data-xxxx,item.dataset.xxxx
使用form-item实例中的方法setValidateMessage