➢ 需求
image.png
1、节点类型下拉选择的时候
选择1，唯一识别码为必填，需要校验和显示*
选择其他的，唯一识别码不做校验，隐藏*
2、输入标准名称，标准名称联想搜索
上代码
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="95px" class="demo-ruleForm">
<el-form-item label="节点类型" prop="code">
<!-- <el-input v-model.trim="ruleForm.code" placeholder="请输入类型编码" /> -->
<el-select v-model.trim="ruleForm.code" :disabled="ifDel" placeholder="请选择节点类型" clearable>
<el-option
v-for="(value,val) in codeList"
:key="val"
:label="val"
:value="val"
/>
</el-select>
</el-form-item>
<el-form-item label="唯一识别码" :disabled="ifDel" :required="isHaveTo" prop="serverUrl">
<el-input v-model.trim="ruleForm.serverUrl" placeholder="请输入唯一识别码" />
</el-form-item>
</el-form>
核心点
-
在唯一识别码的form-item上，添加required属性绑定isHaveTo参数
computed计算isHaveTo，根据节点类型下拉框选择的值来决定是为true还是false
isHaveTo() {
return this.ruleForm.code == '1';
}
- 在节点类型的校验函数中 ，判断当节点类型不为1的时候，移除对唯一识别码的校验
这步很重要，如果前面节点类型选择1，点击了确定按钮，触发了表单校验，当节点类型又改变了，不移除对唯一识别码的校验结果的话，唯一识别码只是会不显示*号，但是唯一识别码的红色提示还在
出现这种错误情况
image.png
移除校验结果后就没得问题了
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请选择节点类型'));
} else {
if(this.ruleForm.code != '1'){ // 移除校验结果
this.$refs.ruleForm.clearValidate('serverUrl');
}
callback();
}
};
完整代码 直接用~~~~ （欧里给！！）
<template>
<div class="compareOrg">
<el-dialog
title="新增资源池"
:visible.sync="dialogVisible"
width="33%"
:before-close="handleClose"
>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="95px" class="demo-ruleForm">
<el-form-item label="标准名称" prop="name">
<!-- <el-input v-model.trim="ruleForm.name" :disabled="ifDel" placeholder="请输入标准名称" /> -->
<el-select
v-model.trim="ruleForm.name"
placeholder="请输入标准名称"
filterable
remote
clearable
:remote-method="remoteMethod"
:loading="loading"
>
<el-option
v-for="(item,val) in orgSelect"
:key="val"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="节点类型" prop="code">
<!-- <el-input v-model.trim="ruleForm.code" placeholder="请输入类型编码" /> -->
<el-select v-model.trim="ruleForm.code" placeholder="请选择节点类型" clearable>
<el-option
v-for="(value,val) in codeList"
:key="val"
:label="val"
:value="val"
/>
</el-select>
</el-form-item>
<el-form-item label="唯一识别码" :required="isHaveTo" prop="serverUrl">
<el-input v-model.trim="ruleForm.serverUrl" placeholder="请输入唯一识别码" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (this.ruleForm.code == '1') {
callback(new Error('请输入唯一识别码'));
} else {
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请选择节点类型'));
} else {
if (this.ruleForm.code != '1') { // 移除校验结果
this.$refs.ruleForm.clearValidate('serverUrl');
}
callback();
}
};
return {
dialogVisible: false,
ruleForm: {
},
rules: {
name: [
{ required: true, message: '请输入标准名称', trigger: 'change' }
],
code: [
{ required: true, message: '请选择节点类型', trigger: 'change' },
{ validator: validatePass2, trigger: 'change' }
],
serverUrl: [
{ validator: validatePass, trigger: 'blur' }
]
},
orgSelect: [],
loading: false,
orgList: [
{ label: 11111111, value: 111111111 },
{ label: 11111111, value: 111111111 },
{ label: 11111111, value: 111111111 },
{ label: 11111111, value: 111111111 }
],
codeList: [
{ val: 1 },
{ val: 2 },
{ val: 3 }
],
}
},
computed: {
isHaveTo() {
return this.ruleForm.code == '1';
}
},
methods: {
debounce(fn, delay) {
let timer = null // 借助闭包
return function() {
console.log('timer', timer)
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(fn, delay)
}
},
searchFn(query) {
this.loading = false;
console.log('www', query)
this.orgSelect = this.orgList.filter(item => {
// console.log(item)
return String(item.label).includes(query);
});
},
remoteMethod(query) { // 联想搜索功能
// console.log('qqq',query)
if (query !== '') {
this.loading = true;
// this.searchFn(query)
// this.debounce(this.searchFn(query),1000)
// let timer=null
// console.log(90)
// console.log(90,timer)
// 防抖 每一次输入 延后两秒执行搜索
if (timer) {
clearTimeout(timer);
}
const timer = setTimeout(() => {
this.loading = false;
console.log('wwww', query)
this.orgSelect = this.orgList.filter(item => {
return String(item.label).includes(query);
});
}, 3000);
// // 节流
// if(flag){
// flag=false;
// }else{
// flag=true;
// setTimeout(() => {
// this.loading = false;
// var flag=false
// console.log('wwww',query)
// this.orgSelect = this.orgList.filter(item => {
// return String(item.label).includes(query);
// });
// }, 3000);
// }
} else {
this.orgSelect = [];
}
},
handleClose() {
this.resetForm();
this.dialogVisible = false;
},
resetForm() {
this.$refs['ruleForm'].resetFields();
},
openDialog(row) {
this.dialogVisible = true
this.row = row
},
handleSubmit() {
this.$refs['ruleForm'].validate(valid => {
if (valid) {
// ...
this.$emit('refresh', true);
} else {
console.log('error submit!!');
return false;
}
});
},
handleDelete() {
this.$confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
//
this.$emit('refresh', true);
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
最终效果
节点类型选择1的状态
image.png
选择1，并点击提交触发校验的状态
image.png
再把节点类型切换到其他的
image.png
