Ant Design Vue 清空时间控件值

小拓拓～

已于 2022-02-16 19:47:45 修改

阅读量1.1k

点赞数

文章标签： javascript vue.js ant

于 2022-02-16 19:45:51 首次发布

本文链接：https://blog.csdn.net/qq_35821469/article/details/122970352

版权

本文档展示了如何在Ant Design Vue中使用日期及时间选择器，并通过添加v-model实现重置功能。代码示例包括单个日期选择器和日期范围选择器，同时提供了`onChange`和`onOk`事件的回调处理。在需要清空已选时间时，可以通过设置v-model对应的值为空数组来重置时间控件。

摘要由CSDN通过智能技术生成

环境：

<template>
  <div>
    <a-date-picker show-time placeholder="Select Time" @change="onChange" @ok="onOk" />
    <br />
    <a-range-picker
      :show-time="{ format: 'HH:mm' }"
      format="YYYY-MM-DD HH:mm"
      :placeholder="['Start Time', 'End Time']"
      @change="onChange"
      @ok="onOk"
    />
  </div>
</template>
<script>
export default {
  methods: {
    onChange(value, dateString) {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
    },
    onOk(value) {
      console.log('onOk: ', value);
    },
  },
};
</script>

问题：

如何通过重置按钮清空已选时间控件的值？

解决：

给控件增加v-model，利用双向绑定清空值

<template>
  <div>
    <a-date-picker show-time placeholder="Select Time" @change="onChange" @ok="onOk" />
    <br />
    <a-range-picker
      v-model="createValue"
      :show-time="{ format: 'HH:mm' }"
      format="YYYY-MM-DD HH:mm"
      :placeholder="['Start Time', 'End Time']"
      @change="onChange"
      @ok="onOk"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
        createValue:[],
    }
 },
  methods: {
    onChange(value, dateString) {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
    },
    onOk(value) {
      console.log('onOk: ', value);
    },
    //重置
    reset() {
        this.createValue = [];//清空时间控件值
    }
  },
};
</script>