Vue3 el-form实现校验error文案含link

前情提要

场景： 在用户选择某个工具后判断该用户是否有权限，如果没有则需要去某个地方申请，于是就有了以下需求..

解决思路

思路： 利用el-form的validator实现自定义校验，在后端返回无权限固定code时，就校验不通过，显示出无权限的文案并包含link

代码分析

        <el-form
          ref="dialogFormRef"
          :model="form.projectForm"
          :rules="rules"
        >
          <el-form-item label="Tool" prop="toolKey" class="tool-item">
            <el-select
              v-model="form.projectForm.toolKey"
              @change="toolKeyChange"
              placeholder="Please select your tool"
            >
              <el-option
                v-for="item in data.toolList"
                :key="item.toolId"
                :label="item.toolName"
                :value="item.toolKey"
              />
            </el-select>
            //由于返回的内容需要添加a标签 所以不能将文案写在new ERROR里返回 
            //而是利用template slot实现不同场景下的校验
            <template v-slot:error>
              <div class="error" v-if="validateFlag">
                You do not have permission for this tool. Please click
                <a :href="applyUrl" target="_blank">
                   <span style="color:  #1c69d4">here</span>
                </a>
                to apply or contact the tool administrator
              </div>
              <div v-else class="error">Please select tool</div>
            </template>
          </el-form-item>
        </el-form>
const rules = ref({
  toolKey: [{ required: true, validator: checkToolName }],
  ],
});

function checkToolName(rule, value, callback) {
  if (!value) {
    return callback(new Error("Please select tool"));
  }
  if (validateFlag.value) {
    //这里一定要undefind 不然会报错
    return callback(new Error(undefined));
  }
  callback();
}

const toolKeyChange = async ()=>{
const res = await POST_GET_PROJECT_BY_TOOL(params);
  if (res.success) {
    validateFlag.value = false;
    if (res?.data?.listData) {
      optionData.optionsList = res.data.listData,
    }
  } else {
    if (res.code === "002003") {
      applyUrl.value = res.msg;
      validateFlag.value = true;
    }
  }
}

这样的操作就比较暴力的完成了需求。有更好的方式欢迎沟通.. 完结撒花🎉