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('发送');
    }