async-validator

<template>
<el-form slot="content" ref="form" :model="dialogConfig.propData" :rules="rules" label-width="100px">
<el-form-item label="岗位名称" prop="dutyName"><el-input v-model.trim="dutyName"/></el-form-item>
</el-form>
</template>

<script>

import { request } from '@/common/js/common.js';
import url from '@/common/api/index.js';
//异步校验岗位是否已存在（该函数会自动捕获catch，所以这里后台的状态码必须200）
var validDutyName = async (rule, value, callback) => {
let res = await request.post(url+"?name="+value,{});
if(res=="true"){
callback();
}else{
callback(new Error("岗位已存在"));
}
};
export default {
data() {
return {
rules: {
dutyName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }]
}
};
},
created() {
//如果是新增机构，则添加机构名重复校验
if(this.dialogConfig.type == "add"){
this.rules.dutyName.push({ required: true, validator: validDutyName, trigger: 'blur' })
}
}
};
</script>