ngsl8755 2022-02-09 10:54 采纳率: 70%
浏览 20
已结题

vue+antd查询,父按钮验证子时间控件

项目需求,时间三级联动控件是子控件,表单和按钮在父组件中,点击查询按钮,需要验证子控件中的“年”是否有值,如果没有选,需要提示选择年,如果有值,就正常查询,这个功能该如何实现,因为刚接触Vue,找了几个例子,但是都不成功。
子控件
  <div id="pointDate">
    <a-select class="year select" v-model="yearsModel" v-on:change="dateChange(1)" placeholder="年" style="width: 117px;">
      <a-select-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
        {{item.label}}
      </a-select-option>
    </a-select>
    <span class="spacer">-</span>
    <a-select class="month select" v-model="monthsModel" v-on:change="dateChange(2)" placeholder="月" style="width:100px;">
      <a-select-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value">
        {{item.label}}
      </a-select-option>
    </a-select>
    <span class="spacer">-</span>
    <a-select class="day select" v-model="daysModel" v-on:change="dateChange(3)" placeholder="日" style="width:100px;">
      <a-select-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value">
        {{item.label}}
      </a-select-option>
    </a-select>
  </div>

父级

                <a-form class="ant-advanced-search-form" layout="inline">
                  <a-row :gutter="24" class="screenRow">
                    <a-col :span="24" style="padding-bottom: 8px;">
                      <a-form-item label="按时间段选择">
                        <a-range-picker
                          id="setDate"
                          format="YYYY-MM-DD"
                          :placeholder="['开始日期', '结束日期']"
                          @change='setDate'
                          :value='setDateValue'
                          :allowClear='false'
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="20">
                      <a-form-item label="按时间点选择">
                        <dateSelect 
                          id="pointDate"
                          ref="pointDateRef"
                          v-on:listenToChildEvent="dateChange"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4" :style="{textAlign: 'right'}">
                      <a-button type="primary" @click='timeGetList(1)'>
                        查询
                      </a-button>
                    </a-col>
                  </a-row>
                </a-form>
请问这种情况该如何做验证?
  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 已结题 2月11日
      • 已采纳回答 2月9日
      • 创建了问题 2月9日

      悬赏问题

      • ¥30 关于#网络安全#的问题:非对称加密验证
      • ¥20 关于线性代数里施密特正交化和QR分解的疑问
      • ¥15 matlab超类包含解析错误
      • ¥15 python拖拽文件问题
      • ¥15 执行import paddle代码出现错误如何解决?
      • ¥15 hisat2align exited with value 137
      • ¥15 寻找大学生合作开发软件(Delphi)
      • ¥30 AndroidBench&eMMC内存测试速度&Android
      • ¥15 W10 文件共享失败 怎么解决
      • ¥20 b站私信完整导出的方法