element-ui設置下拉選擇切換必填和非必填

➢ 需求

默認都是必選

下拉選擇的時候

選擇必填，活動名稱爲必填，須要校驗和顯示*

選擇非必填，活動名稱不作校驗，隱藏*

➢ 初始校驗規則

經測試，網上其餘的方式都沒有實現需求，動態切換rules中的required沒有做用

由於按照如下的寫法的話，element-ui在組件初始化後校驗規則就定型了，切換也沒用

rules: {
    name: [
        { required: true, message: "請輸入名稱", trigger: "blur" }
    ],
    region: [
        { required: true, message: "請選擇類型", trigger: "blur" }
    ]
}

➢ 解決方案

第一步：

去除rules中須要動態校驗的字段規則

去除name

rules: {
    region: [
        { required: true, message: "請選擇類型", trigger: "blur" }
    ]
}

第二步：

在字段爲name的form-item上，添加required屬性

下面代碼isHaveTo爲新字段，根據下拉框選擇的值來決定是爲true仍是false

<el-form-item label="活動名稱" prop="name" :required="isHaveTo">
    <el-input v-model="ruleForm.name"></el-input>
</el-form-item>

第三步：

計算屬性，新增字段isHaveTo

下拉選擇框非必須是爲1，其餘都是必填，包括默認

computed: {
    isHaveTo: function() {
        return this.ruleForm.region === `0`;
    }
},

效果如圖：

下拉切換，*號顯隱，提交時也有不一樣規則

注意，新的問題來了

在選擇必填時，沒有了以前的錯誤提示文字，而是element自帶的提示

第四步：

設置錯誤提示

使用自定義函數控制流程

把name字段從新加回去rules

注意是函數{ validator: validateName }

rules: {
    name: [{ validator: validateName }],
    region: [
        { required: true, message: "請選擇類型", trigger: "blur" }
    ]
}

而後設置函數validateName

能夠看到，必填時按照咱們設置的提示語提示，非必填時，校驗經過

貼上代碼

data() {
     // 驗證活動名稱的函數
     let validateName = (rule, value, callback) => {
         // 當活動名稱爲空值且爲必填時，拋出錯誤，反之經過校驗
         if (this.ruleForm.name === "" && this.isHaveTo) {
             callback(new Error("請輸入活動名稱"));
         } else {
             callback();
         }
     };
     return {
         ruleForm: {
             name: "",
             region: ""
         },
         rules: {
             name: [{ validator: validateName }],
             region: [
                 { required: true, message: "請選擇類型", trigger: "blur" }
             ]
         }
     };
 },

➢ 完整demo代碼

demo使用vue-cli，引入element-ui

核心代碼參考以下：

<template>
    <div>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="活動名稱" prop="name" :required="isHaveTo">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="活動區域" prop="region">
                <el-select v-model="ruleForm.region" placeholder="請選擇活動區域" style="width:100%">
                    <el-option label="必填" value="0"></el-option>
                    <el-option label="非必填" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">當即建立</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        // 驗證活動名稱的函數
        let validateName = (rule, value, callback) => {
            // 當活動名稱爲空值且爲必填時，拋出錯誤，反之經過校驗
            if (this.ruleForm.name === "" && this.isHaveTo) {
                callback(new Error("請輸入活動名稱"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                name: "",
                region: ""
            },
            rules: {
                name: [{ validator: validateName }],
                region: [
                    { required: true, message: "請選擇類型", trigger: "blur" }
                ]
            }
        };
    },
    computed: {
        isHaveTo: function() {
            return this.ruleForm.region !== `1`;
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    console.log(`已提交表單`);
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        }
    }
};
</script>