a-form

最新推荐文章于 2025-05-11 14:15:46 发布

ation_work

最新推荐文章于 2025-05-11 14:15:46 发布

阅读量161

点赞数

分类专栏： vantd随笔文章标签： java windows servlet

本文链接：https://blog.youkuaiyun.com/ation_work/article/details/130384184

版权

vantd随笔专栏收录该内容

10 篇文章

订阅专栏

该段代码展示了在Vue.js应用中使用AntDesignVue库创建一个内联表单，包含一个年份选择器组件。用户选择年份后，通过`searchQuery`方法触发查询操作。表单数据绑定到`queryParam`对象，并在`searchReset`方法中重置。此外，还包括了对`yearShowOne`、`panelChangeOne`事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

temple

<a-form layout="inline" :form="form" @keyup.enter.native="searchQuery">
    <a-row :gutter="24">
     <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="年份" :label-col="{ span: 6 }" :wrapper-col="{ span:         
                      12 }">
                    <a-date-picker
                      mode="year"
                      placeholder="请选择年份"
                      format="YYYY"
                      v-model="queryParam.year"
                      style="width: 100%"
                      :open="yearShowOne"
                      v-decorator="['year', {}]"
                      @openChange="openChangeOne"
                      @panelChange="panelChangeOne"
                    />
                  </a-form-item>
                </a-col>

data

form: this.$form.createForm(this, { name: 'search' }), // 表单关联设置

method

searchReset() {
      this.queryParam = {
        year: '',
      }
      this.form.setFieldsValue({
        // date: '',
        year: '',
        yearPlanName: '',
        status: ''
      })
      this.loadData()
    },