美文网首页
ElementUI el-form 中不是 elementui

ElementUI el-form 中不是 elementui

作者: Cherry丶小丸子 | 来源:发表于2022-05-28 13:45 被阅读0次
<el-form :model="form" :rules="rules" ref="form">

    <el-form-item label="原因描述" prop="reasonDesc" v-show="sybFlag">
        <div ref="reasonDesc"  contenteditable="true"></div>
    </el-form-item>

    <el-form-item label="功能描述" prop="functionDesc" v-show="!sybFlag">
        <div ref="functionDesc" contenteditable="true"></div>
    </el-form-item>

    <el-button type="primary" @click="submitBtn">提交</el-button>

</el-form>

export default {
    data(){
        let reasonDescRule = (rule, value, callback) => {
            if(this.sybFlag){
                if(value == ''){
                    callback(new Error("请输入原因描述"));
                }else{
                    callback();
                }
            }else{
                callback();
            }
        };
        let functionDescRule = (rule, value, callback) => {
            if(!this.sybFlag){
                if(value == ''){
                    callback(new Error("请输入功能描述"));
                }else{
                    callback();
                }
            }else{
                callback();
            }
        };
        return {
            form: {
                reasonDesc: '',
                functionDesc: '',
                sybFlag: true
            },
            rules: {
                reasonDesc:[
                    { required: true, validator: reasonDescRule }
                ],
                functionDesc:[
                    { required: true, validator: functionDescRule }
                ]
            }
        }
    },
    methods: {
        submitBtn(){
            // 在提交之前先对表单自定义元素赋值,然后在进行验证操作
            this.form.reasonDesc = this.$refs.reasonDesc.target.innerHtml;
            this.form.reasonDesc = this.$refs.functionDesc.target.innerHtml;

            this.$refs.form.validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        }
    }
}
<style lang="scss" scoped>
    // 设置验证不通过时,边框为红色
    .el-form-item.is-error .w-e-toolbar{
        border-color: #F56C6C !important;
    }
    .el-form-item.is-error .w-e-text-container{
        border-color: #F56C6C !important;
    }
</style>

相关文章

网友评论

      本文标题:ElementUI el-form 中不是 elementui

      本文链接:https://www.haomeiwen.com/subject/dgpiprtx.html