沦落为一个前端~~~

一，代码

使用isChoice这个计算属性，来决定按钮的disabled值。

<template>
  <div>
    <a-form style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item
        label="样本来源"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
                :required="true"
      >
        <a-select mode="multiple" v-model='trainForm.source'>
          <a-select-option value="metis">Metis</a-select-option>
          <a-select-option value="api">API</a-select-option>
                    <a-select-option value="unknown">Unknown</a-select-option>
        </a-select>
      </a-form-item>
            <a-form-item
              label="测试/训练集"
              :labelCol="{span: 7}"
              :wrapperCol="{span: 17}"
                :required="true"
            >
              <a-select mode="multiple" v-model='trainForm.trainTest'>
                <a-select-option value="train">训练集</a-select-option>
                <a-select-option value="test">测试集</a-select-option>
              </a-select>
            </a-form-item>
      <a-form-item
        label="时间范围"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
                :required="true"
      >
        <a-range-picker  
                    :placeholder="['开始时间', '结束时间']"
                    format="YYYY-MM-DD"
                    @change="createChange"
                    style="width: 100%" 
                />
      </a-form-item>
      <a-form-item :wrapperCol="{span: 17, offset: 7}">
        <a-button :disabled=isChoice type="primary" @click="nextStep">下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'SampleChoice',
    data () {
      return {
            trainForm: {
                source: 'unknown',
                trainTest: '',
                dateRange: {
                    beginTime: '',
                    endTime: ''
                }
            },
      }
    },
    computed: {
        isChoice() {
            return !(this.trainForm.trainTest
                && this.trainForm.source.length
                && this.trainForm.dateRange.beginTime
                && this.trainForm.dateRange.endTime)
        }
    },
  methods: {
    nextStep () {
      this.$emit('nextStep')
    },
        createChange(dates, dateStrings) {
          this.trainForm.dateRange.beginTime = dateStrings[0]
            this.trainForm.dateRange.endTime = dateStrings[1]
        },
  }
}
</script>

<style scoped>

</style>

二，效果

截屏2020-11-19下午4.27.56.png 截屏2020-11-19下午4.28.17.png