先看需求：（不想看的直接拉到最后）

?【需求說(shuō)明】

6、如狀態(tài)為上架時(shí)，庫(kù)存為必填，下架狀態(tài)時(shí)，庫(kù)存為可填，前面無(wú)星號(hào)

實(shí)現(xiàn)方法：使用this.$set()和this.$delete()

上代碼：

由于設(shè)計(jì)商業(yè)隱私，代碼只上傳一部分：
?

<el-form :model="commodityForm" ref="commodityForm" :rules="rules" label-width="120px">
      
        其他字段......

        <el-form-item label="上下架狀態(tài)" prop="status">
          <el-switch
            v-model="commodityForm.status"
            :active-value="1"
            :inactive-value="0"
            @change="switchChange"
            >
          </el-switch>
        </el-form-item>
      </el-form>

表單data中原來(lái)的rules：

      // 表單校驗(yàn)
      rules:{
        name: [{ required: true, message: "請(qǐng)輸入商品名稱", trigger: ['blur','change']}],
        title: [{ required: true, message: "請(qǐng)輸入商品標(biāo)題", trigger: ['blur','change']}],
        commodityFormImg:[{ required: true, message: '請(qǐng)上傳商品圖片', trigger: 'change'}],
        typeId: [{ required: true, message: '請(qǐng)選擇所屬分類', trigger: 'change'}],
        brandId: [{ required: true, message: '請(qǐng)選擇商品品牌', trigger: 'change'}],
        specification: [{ required: true, message: '請(qǐng)選擇商品規(guī)格', trigger: ['blur','change']}],
        sellingPrice: [{ required: true, message: '請(qǐng)輸入銷售價(jià)', trigger: ['blur','change']}],
        // stock: [{ required: true, message: '請(qǐng)輸入庫(kù)存', trigger: ['blur','change']}],
        detail: [
          { required: true, message: "商品詳情不能為空", trigger: "blur" },
          { validator: validateEditor, trigger: 'blur,change' }
        ]
      },

不添加上下架狀態(tài)的rules

在change事件中進(jìn)行判斷：重點(diǎn)方法在這里?。。。。。。。。?！

    // 上下架開(kāi)關(guān)事件
    switchChange(e) {
       if(e != 1) {
        //刪除校驗(yàn)的關(guān)鍵的兩行代碼（兩行都要?。。。。。。。。。。。。。。。?        // 這個(gè)只能刪除文字提示，但是星號(hào)還在,
        this.$refs["commodityForm"].clearValidate(["stock"]);
        // 這個(gè)只能刪除星號(hào)提示，但是文字還在
        this.$delete(this.rules,'stock');
       }else{
         //添加校驗(yàn)代碼（?。。。。。。。。。。。。。。。?        this.$set(this.rules,'stock',[{ required: true, message: '請(qǐng)輸入庫(kù)存', trigger:      
         ['blur','change']}])
       }
    }

2023-1-29二更一個(gè)最新的方法：

 <el-form-item label="庫(kù)存" prop="stock" :rules="commodityForm.status == 1 ? { required: true, message: '請(qǐng)輸入庫(kù)存', trigger: ['blur','change']} : {}">
          <el-input v-model.trim="commodityForm.stock" @input="commodityForm.stock = commodityForm.stock.replace(/[^\d]/g, '')" size="small" placeholder="請(qǐng)輸入庫(kù)存"></el-input>
        </el-form-item>

感謝我的好同事教我做事哈哈哈

?:rules="commodityForm.status == 1 ? { required: true, message: '請(qǐng)輸入庫(kù)存', trigger: ['blur','change']} : {}"

同時(shí)方法中的代碼留一個(gè)：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-400941.html

   switchChange(e) {
       if(e != 1) {
        this.$refs["commodityForm"].clearValidate(["stock"]);
       }
    }

到了這里，關(guān)于vue2：elementUI中Form 表單在特定情況下做動(dòng)態(tài)rules添加刪除的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！