效果图
第一步在<el-form>中加上 :rules="dataRule(名字自取)"
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="80px"
:inline="true"
>
<div style="margin-bottom: 20px">
<!-- <el-button
type="white"
@click="
$router.push({
name: 'pesticide-useinfo',
})
"
>返回</el-button
>
<el-button
v-if="!disabled"
type="primary"
@click="dataFormSubmit()"
>保存</el-button
> -->
<el-button
@click="addOneLine()"
style="right: 75px; position: absolute; margin-top: 20px"
type="primary"
:disabled="isnewone"
>新增记录</el-button
>
<el-button
@click="deleteHandle()"
style="right: 200px; position: absolute; margin-top: 20px"
type="danger"
:disabled="dataListSelections.length <= 0"
>批量删除</el-button
>
<!-- <el-button
v-if="!disabled"
type="primary"
@click="dataFormSubmit()"
>新增</el-button
> -->
</div>
<div>
<el-form-item label="户主编号" prop="farmerId">
<!-- <el-input
v-model="dataForm.farmerId"
:disabled="disabled"
placeholder="户主编号"
onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
:maxlength="15"
></el-input> -->
<el-tooltip
class="item"
effect="dark"
content="请先填写农户信息表的户主编号"
placement="top"
>
<el-button style="width: 150px; height: 36px"> </el-button>
</el-tooltip>
</el-form-item>
<el-form-item label="年份" prop="dateyear">
<!-- <el-input
v-model="dataForm.dateyear"
:disabled="disabled"
placeholder="年份"
></el-input> -->
<el-date-picker
type="year"
placeholder="选择年份"
v-model="dataForm.dateyear"
style="width: 100%"
format="yyyy"
value-format="yyyy"
:disabled="true"
></el-date-picker>
</el-form-item>
<el-form-item label="任务id" prop="taskId">
<el-input
onkeyup="this.value = this.value.replace(/[\u4E00-\u9FA5]/g,'');"
v-model="dataForm.taskId"
:disabled="disabled"
placeholder="任务id"
:maxlength="15"
></el-input>
</el-form-item>
</div>
</el-form>
js中
data () {
return {
disabled: false,
visible: false,
dataForm: {
id: 0,
farmerId: '',
dateyear: '',
taskId: ''
},
dataRule: {
farmerId: [
{ required: true, message: '农户编号不能为空', trigger: ['blur', 'change'] }
],
taskId: [
{ required: true, message: '任务id不能为空', trigger: ['blur', 'change'] }
],
dateyear: [
{ required: true, message: '年份不能为空', trigger: ['blur', 'change'] }
],
}
}
},
就可以实现校验了