ivew select组件 DatePicker组件的清空

Posted guangzhou11

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ivew select组件 DatePicker组件的清空相关的知识,希望对你有一定的参考价值。

 <Form   ref="formInline" :model="formInline" :rules="ruleInline" inline>
            <FormItem  label="用户类型:" :label-width="80">
              <Select clearable  ref="oselect" v-model="formInline.original" style="width:200px">
                <Option v-for="item in original" :value="item.id" :key="item.id"> item.name </Option>
              </Select>
            </FormItem>
            <FormItem label="开始时间:" :label-width="80">
              <DatePicker
                clearable  
                ref="startData"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                @on-change="startTime"
                placeholder="选择开始日期"
                style="width: 200px"
              ></DatePicker>
            </FormItem>
            <FormItem label="结束时间:" :label-width="80">
              <DatePicker
                clearable  
                ref="endData"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                @on-change="endTime"
                placeholder="选择结束日期"
              ></DatePicker>
            </FormItem>
            <FormItem>
              <div style="display: flex;">
                <Button type="primary" @click="handleSubmit(‘formInline‘)">查询</Button>
                <Button @click="dataReset()" style="margin-left: 8px">重置</Button>
              </div>
            </FormItem>
          </Form>

select  清空

在 select  组件设置

 clearable  
                ref="startData"

调用方法

 this.$refs.oselect.clearSingleSelect();

在DatePicker组件 清空

 clearable  
                ref="startData"

调用方法

 this.$refs.startData.handleClear();

方法:

 // 重置
    dataReset() 
          //clearSingleSelect 清除select 框
          this.$refs.oselect.clearSingleSelect();
          this.$refs.startData.handleClear();
          this.$refs.endData.handleClear()
    ,

 

以上是关于ivew select组件 DatePicker组件的清空的主要内容,如果未能解决你的问题,请参考以下文章

ivew 穿梭框Transfer组件高亮显示操作值

ivew | element ui- 关于table组件自定义sortMethod排序不生效或错误问题处理

使用ivew组件,如何对table组件实现每行可以配置(字体颜色、大小,每行的背景颜色,固定表头等)

通过v-model控制组件的显示隐藏

有没有办法在 Vue DatePicker 中设置选定的选项?

在vue里面使用iVew框架