vue,单选框控制时间框禁用

vue,单选框控制时间框禁用,选择时间1,禁用开始时间2,选择时间2,禁用开始时间1

img


<el-form-item label="时间">
                        <el-radio :label="0" v-model="query.time_type">时间1</el-radio>
                        <el-radio :label="1" v-model="query.time_type">时间2</el-radio>
                    </el-form-item>
                    <div>
                      <el-form-item label="开始时间">
                        <el-date-picker
                            v-model="query.start_time"
                            type="date"
                            size="mini"
                            style="width:193px"
                            placeholder="开始时间"
                        ></el-date-picker>
                      </el-form-item>
                      <el-form-item label="結束时间">
                          <el-date-picker
                              v-model="query.stop_time"
                              type="date"
                              size="mini"
                              style="width:193px"
                              placeholder="結束时间"
                          ></el-date-picker>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="开始时间2">
                        <el-date-picker
                            v-model="query.start_time"
                            type="date"
                            size="mini"
                            style="width:193px"
                            placeholder="开始时间"
                        ></el-date-picker>
                      </el-form-item>
                      <el-form-item label="結束时间2">
                          <el-date-picker
                              v-model="query.stop_time"
                              type="date"
                              size="mini"
                              style="width:193px"
                              placeholder="結束时间"
                          ></el-date-picker>
                      </el-form-item>
                    </div>

<el-form-item label="时间">
                        <el-radio :label="0" :value="0" v-model="query.time_type">时间1</el-radio>
                        <el-radio :label="1" :value="1" v-model="query.time_type">时间2</el-radio>
                    </el-form-item>
                    <div>
                      <el-form-item label="开始时间">
                        <el-date-picker
                            v-model="query.start_time"
                            type="date"
                            size="mini"
                            :disabled="query.time_type===0"
                            style="width:193px"
                            placeholder="开始时间"
                        ></el-date-picker>
                      </el-form-item>
                      <el-form-item label="結束时间">
                          <el-date-picker
                              v-model="query.stop_time"
                              type="date"
                              size="mini"
                              style="width:193px"
                              placeholder="結束时间"
                          ></el-date-picker>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="开始时间2">
                        <el-date-picker
                            v-model="query.start_time"
                            :disabled="query.time_type===1"
                            type="date"
                            size="mini"
                            style="width:193px"
                            placeholder="开始时间"
                        ></el-date-picker>
                      </el-form-item>
                      <el-form-item label="結束时间2">
                          <el-date-picker
                              v-model="query.stop_time"
                              type="date"
                              size="mini"
                              style="width:193px"
                              placeholder="結束时间"
                          ></el-date-picker>
                      </el-form-item>
                    </div>

应该有 disable 属性 。根据 radio的值 改变 disable的值
:disable


<el-form>
        <el-form-item label="时间">
            <el-radio label="0" v-model="query.time_type">时间1</el-radio>
            <el-radio label="1" v-model="query.time_type">时间2</el-radio>
        </el-form-item>
        <div>
          <el-form-item label="开始时间1">
            <el-date-picker
                :disabled="query.time_type=='1'"
                v-model="query.start_time"
                type="date"
                size="mini"
                style="width:193px"
                placeholder="开始时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="結束时间1">
              <el-date-picker
                  v-model="query.stop_time"
                  type="date"
                  size="mini"
                  style="width:193px"
                  placeholder="結束时间"
              ></el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="开始时间2">
            <el-date-picker
                :disabled="query.time_type=='0'"
                v-model="query.start_time"
                type="date"
                size="mini"
                style="width:193px"
                placeholder="开始时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="結束时间2">
              <el-date-picker
                  v-model="query.stop_time"
                  type="date"
                  size="mini"
                  style="width:193px"
                  placeholder="結束时间"
              ></el-date-picker>
          </el-form-item>
        </div>
      </el-form>