自己琢磨的,也不知道是不是正确答案,反正是实现了,哈哈哈哈哈!我的需求是类似表格的样式,所以我用了el-descriptions,原理都一样,用啥不重要。
// 比如要对整改成效做必填项校验,里面有多少个值需要就看你需求做了
<el-form-item label="整改成效:" prop="table">
<el-descriptions class="margin-top" :column="4" size="mini" border>
<el-descriptions-item>
<template slot="label">
增收节支(万元)
</template>
<el-input type="number" onKeypress="return (/^[0-9.]*$/.test(String.fromCharCode(event.keyCode)))" v-model="editQuery.zsjz" placeholder="请输入" :disabled="isDisabled" />
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
新制定制度(个)
</template>
<el-input type="number" onKeypress="return (/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))" v-model="editQuery.xzdzd" placeholder="请输入" :disabled="isDisabled" />
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
修订完善制度(个)
</template>
<el-input type="number" onKeypress="return (/^[0-9.]*$/.test(String.fromCharCode(event.keyCode)))" v-model="editQuery.xdwszd" placeholder="请输入" :disabled="isDisabled" />
</el-descriptions-item>
</el-descriptions>
</el-form-item>
// 就是这样,自己写个校验方法,挨个判断,table就等于汇总调用
data() {
var validateParam = (rule, value, callback) => {
if (!this.editQuery.zsjz) {
return callback(new Error('请填写增收节支(万元)'))
}
if (!this.editQuery.xzdzd) {
return callback(new Error('请填写新制定制度(个)'))
}
if (!this.editQuery.xdwszd) {
return callback(new Error('请填写修订完善制度(个)'))
}
callback()
}
return {
rules: {
table: [{ required: true, validator: validateParam, trigger: 'blur' }]
}
}