vue項目form表單中按鈕選擇狀態

在ant-design-vue的form表單驗證中，有很多封裝很好的組件，但不完全滿足於你的需求，更多的是在現有的基礎上擴展出其他。

     需求：

　　點擊按鈕彈出dialog選擇項，當用戶選取需要項，關閉dialog，根據判斷用戶是否選擇一個及以上，若選擇大於一項，無提示。用戶未選擇時，提示用戶未選擇。如下圖

 

　　思路：

　　在同一個forne-item分別定義輸入框input和btn組件，

　　將input組件雙向綁定根據按鈕選擇子組件傳給父組件的數據，判斷input的值。

　　話不多說了，狀態不好，直接上代碼！！

     <a-form-model
          ref="editForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
        <a-form-model-item
            required
            :label="選擇項"
            prop="programList"
          >
            <a-input
              style="width:10px;height:30px;display:none;"
              v-model="form.programList"
            />
            <a-button color="#6BAFCE" @click="selectPrograme">
              按鈕</a-button
            >
          </a-form-model-item>
       </a-form-model>

　　

  computed: {
    rules() {
      return {
        scheduleName: {
          required: true,
          message: 提示信息,
          trigger: 'blur',
        programList: [
          {
            required: true,
            message: 提示信息,
            trigger: 'change',
          },
          {
            validator: (rule, value, callback) => {
              if (this.form.programList == undefined) {
                callback(
                  new Error(提示信息))
                );
                return;
              }
              return callback();
            },
          },
        ],
      };
    },
  },

　　

保存時對信息校驗

  this.$refs.editForm.validate(valid => {
        if (!valid) {
          console.log('不發送');
          this.loading = false;
          return;
        }
        console.log('發送');
    }