element-ui 的表单，怎么样能在校验不通过时，展示a链接

Z时代
2024-03-08
分类：IT

请教大家个问题，
element-ui 的表单校验，怎么样能在校验不通过时，
不展示纯字符串，而是展示一个a链接呢？

回答：

这么写：

 <div slot="error" slot-scope="{ error }">
          <a href="https://baidu.com">{{ error }}</a>        </div>

给你举个例子：

<el-form
      :model="numberValidateForm"
      ref="numberValidateForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="年龄"
        prop="age"
        :rules="[
          { required: true, message: '年龄不能为空' },
          { type: 'number', message: '年龄必须为数字值' }
        ]"
      >
        <el-input
          type="age"
          v-model.number="numberValidateForm.age"
          autocomplete="off"
        ></el-input>
        <div slot="error" slot-scope="{ error }">
          <a href="https://baidu.com">{{ error }}</a>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numberValidateForm')"
          >提交</el-button
        >
      </el-form-item>    </el-form>

<script>
  export default {
    data() {
      return {
        numberValidateForm: {
          age: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }</script>