这个是初始化时间时展示的样子，每次展示的是当前月份1号到目前日期。

实现部分：

这一段实现的效果是初始化时设置当前月份一号到目前的日期，然后在重置时删除选择器内的内容，并可以选择修改等

<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-item label="时间">
              <a-range-picker :value="dateData" @change="ondateChange" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8" >
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange">
      </a-table>
  </a-card>
</template>
<script>
  import moment from 'moment';
  import 'moment/locale/zh-cn';
  export default {
    data () {
      return {
        description: '',
        dateData: [],
        data: [],
        queryParam: {},
        pagination:{
          defaultPageSize:10,
          showTotal: total => `共 ${total} 条数据`,
          showSizeChanger:true,
          pageSizeOptions: ['10', '20'],
        columns,
		url: {
            list: "/list", // 这里是你自己的查询数据的链接
    created () {
      this.queryData();
    methods: {
      queryData(){
        getAction(this.url.list, this.queryParam).then(res => {
          if(res.success){
            this.data = res.result;
          }else{
            this.$message.error(res.message)
          this.loading = false;
        this.queryParam.startDate = moment().startOf('month').format('YYYY-MM-DD')
        this.queryParam.endDate = moment().format('YYYY-MM-DD')
        this.ondateChange([moment().startOf('month'), moment()]);
      ondateChange(date, dateString) {
        this.dateData = date;
        this.queryParam.startDate = date[0].format('YYYY-MM-DD')
        this.queryParam.endDate = date[1].format('YYYY-MM-DD')
      searchQuery() {
        this.loading = true;
        getAction(this.url.list, this.queryParam).then(res => {
          if(res.success){
            this.data = res.result;
          }else{
            this.$message.error(res.message)
          this.loading = false;
      searchReset() {
        this.queryParam = {}
        this.dateData = []
        this.loadData(1)
</script>
<style scoped>
</style>

初始化实现设置日期的代码是：

this.ondateChange([moment().startOf('month'), moment()]);

因为在ondateChange时间内，我们才可以拿到组件返回的时间，所以通过组件的值改变事件来设置时间，

ondateChange(date, dateString) {
	console.log("date, dateString",date, dateString)
	this.dateData = date;
	this.queryParam.startDate = date[0].format('YYYY-MM-DD')
	this.queryParam.endDate = date[1].format('YYYY-MM-DD')
组件重置的时候将值设置为空即可
 
this.dateData = []
 
自定义分页实现：
 
pagination:{
  defaultPageSize:20,
  showTotal: total => `共 ${total} 条数据`,
  showSizeChanger:true,
  pageSizeOptions: ['10', '20'],
实现的代码例子是这样的：
 
选择的时候：
 
选择完成后：
 
如图，可以发现在选择的时候样子，代码如下：
 
<template>
    <a-form layout='inline'>
      <a-form-item label='查询时间'>
        <a-range-picker @panelChange="handlePanelChange2" :value="dateData" format="YYYY-MM" :mode="mode1"/>
      </a-form-item>
    </a-form>
</template>
<script>
export default {
  data() {
    return {
      mode1: ['month', 'month'],
      dateData: [],
      queryParam: {}
  methods: {
    handlePanelChange2(value, mode) {
      this.dateData = value;
      this.queryParam.startTime = value[0].format('YYYY-MM');
      this.queryParam.endTime = value[1].format('YYYY-MM');
      this.mode1 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
    searchResets() {
      this.queryParam = {};
      this.dateData = [];
</script>
<style scoped>
</style>
 
这个还是和上述代码有些差异的，需要对比打印发现。相信你们一看就会，我就不解释第二段的代码了，看官网吧！
 
因为上面的代码是删减后未测试的，有的东西实现可以参考，例如这里的分页实现以及时间等，有什么问题欢迎留言！！！
 
                    简单的日期选择器范围选择日期选择先看效果：这个是初始化时间时展示的样子，每次展示的是当前月份1号到目前日期。实现部分：这一段实现的效果是初始化时设置当前月份一号到目前的日期，然后在重置时删除选择器内的内容，并可以选择修改等&lt;template&gt;  &lt;a-card :bordered="false"&gt;    &lt;div class="table-page-search-wrapper"&gt;      &lt;a-form layout="inl
				
VueRangedatePicker日期选择器，具有范围选择演示https://bliblidotcom.github.io/vue-rangedate-picker/demo/安装npm install --save vue VueRangedatePicker日期选择器，具有范围选择演示https://bliblidotcom.github.io/vue -rangedate-picker / demo /安装npm install --save vue-rangedate-picker用法捆绑程序（Webpack，汇总）从'vue'导入Vue从'vue-rangedate-picker'导入VueRangedatePicker Vue.use（VueRangedatePicker）浏览器
<a-date-picker
	format="YYYY-MM-DD HH:mm:ss"
	v-decorator="['time',{rules: [{ required: true, message: '请输入时间!' }]}]"
        :showTime="{ initialValue: 
后端返回数据形式
 const validTime=[moment(res.data.StartTime,'YYYY-MM-DD HH:mm:ss'),moment(res.data.EndTime,'YYYY-MM-DD HH:mm:ss')]
values.validTime[0].format('YYYY-MM-DD HH:mm:ss')
<a-range-picker  @change="onChangeRangeDate" format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']"/>
获取起止时间值则通过 @change="onChangeRangeDate"函数实现，如下：
onChangeRangeDate(value,dateString){
      this.fields.startDate = dateString[0];
        style="width: 400px"
        v-model:value="shijian"
        :ranges="ranges"  //预设时间范围快捷选择,会在左边出现小蓝框
        :disabled-date="disabledDate"  //不可选择的日期
        :disabled-time="disa
style=“width: 400px”
v-model:value=“shijian”
:ranges=“ranges”  //预设时间范围快捷选择,会在左边出现小蓝框
:disabled-date=“disabledDate”  //不可选择的日期
:disabled-time=“disabledRangeTime”  //不可选择的时间
:show-time="{  //增加时间选择功能
hideDisabledOptions: true,  //隐藏禁止选择的选
<a-table bordered :columns="columns" :data-source="data" :pagination="false" :loading="loading" rowKey="id"></a-table>
这里的data为后台返回数据，合并的话需要重点