简单的日期选择器范围选择
日期选择
先看效果：
这个是初始化时间时展示的样子，每次展示的是当前月份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></div><div><a-tableref="table"size="middle"borderedrowKey="id":columns="columns":dataSource="data":pagination="pagination":loading="loading"@change="handleTableChange"></a-table></div></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><div><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></div></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>
这个还是和上述代码有些差异的，需要对比打印发现。相信你们一看就会，我就不解释第二段的代码了，看官网吧！
因为上面的代码是删减后未测试的，有的东西实现可以参考，例如这里的分页实现以及时间等，有什么问题欢迎留言！！！
