沦落为一个前端~~~
一,代码
使用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>
二,效果


网友评论