1. 需求
很多时候我们使用el-form想修改下错误提示的UI，比如table中使用form校验这类场景下错误提示的UI调整就非常重要。
2. 了解文档
Form-Item Scoped Slot
| name | 说明 |
|---|---|
| error | 自定义表单校验信息的显示方式，参数为 { error } |
3.实际使用
html里使用错误的插槽将自定义错误插入。
<template><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" ><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input><template slot="error" slot-scope="itemScope"><!-- 自定义错误信息 --><div v-if="itemScope.error"><el-tooltip :content="itemScope.error" placement="top"><i class="el-icon-warning-outline sad-item-error" /></el-tooltip></div></template></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item><el-form>
</template>
javascript的代码大同小异
export default {data() {return {ruleForm: {name: ''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]}};},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();}}}
样式要做一些调整
.el-form-item{margin-bottom: 0;
}
/* 自己调整 */
.sad-item-error{position: absolute;color: #F56C6C;top: 0;left: 100%;line-height: 32px;
}
4. 结果
结果类似如下:
