需要实现这么一个功能:
点击radio1,区间选择启用,点选择禁用;点radio2,区间选择禁用,点选择启用
<a-radio-group v-model="value" @change="handleDisabledChange" >
<a-row :gutter="24" class="screenRow">
<a-col :span="1" style="padding-bottom: 8px;">
<a-radio
name="dtGroup"
:value="1" />
</a-col>
<a-col :span="23" style="padding-bottom: 8px;">
<a-form-item
label="时间区间选择">
<a-range-picker
format="YYYY-MM-DD"
:placeholder="['开始日期', '结束日期']"
ref='setDateRef'
@change='setDate'
:allowClear='false'
:disabled='!disabled' />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" class="screenRow">
<a-col :span="1">
<a-radio
name="dtGroup"
:value="2" />
</a-col>
<a-col :span="13">
<a-form-item
label="时间点选择">
<a-date-picker
ref='pointDateRef'
@change="onChange"
:disabled='!disabled' />
</a-form-item>
</a-col>
<a-col :span="8" :style="{textAlign: 'right'}">
<a-button type="primary" @click='timeGetList(1)'>
查询
</a-button>
</a-col>
</a-row>
</a-radio-group>
handleDisabledChange(e) {
var i = e.target.value;
for (var j = 1; j <= i; j++) {
if (e.target.value == 1) {
console.log('我是区间时间:'+j);
if (e.target.value == 1) {
console.log(this.$refs.setDateRef.disabled);
this.$refs.setDateRef.disabled = !this.$refs.setDateRef.disabled;
console.log(this.$refs.setDateRef.disabled);
} else {
this.$refs.pointDateRef.disabled = this.$refs.pointDateRef.disabled;
}
} else {
console.log('我是点时间:'+j);
if (e.target.value == 2) {
this.$refs.pointDateRef.disabled = !this.$refs.pointDateRef.disabled;
} else {
this.$refs.setDateRef.disabled = this.$refs.setDateRef.disabled;
}
}
}
},
现在这样写导致控制台可以打印出结果,但是并没有将disabled的值赋给:disabled;
各位!该怎么解决,我第一次碰vue,可以说的详细点儿吗!谢谢了!