antd-design-vue a-ranger-picker 部分功能的项目总结

最新推荐文章于 2025-05-29 11:08:50 发布

原创

最新推荐文章于 2025-05-29 11:08:50 发布 · 1.7k 阅读

标签

#vue.js #前端

收录于

本文介绍了Ant Design Vue中如何实现日期范围选择器的定制功能，即默认选择最近一周，之后只能选择已选时间前后的一段范围，如一星期或一个月。同时，展示了异步展开的表格功能，包括自定义展开图标和根据展开状态获取子数据的方法。

antd-vue使用方面小功能总结

1 a-range-picker

<a-range-picker
         :disabled-date="disabledDate"
          v-model="priceRangeDate"
          @calendarChange="calendarPriceRangeChange"
            @change="changePriceRangeDate"
 >
  <a-icon
     slot="suffixIcon"
     type="calendar"
   />
  </a-range-picker>

实现功能，默认选择的是最近一个星期的时间，如果当选择某个时间后，再选择只能选择已选时间的前后一段范围比如一个星期一个月等

//vue部分
import moment from 'moment'
<script>
data(){
     // 现在的时间
	 priceRangeDate: [],
	 offsetDays: 86400000 * 365,  // 最多选择365天
	 selectPriceDate: '',
},
methods:{
       // 获取最近指定几天日期的函数
    getDay (day) {
      const today = new Date()
      const targetdayMilliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetdayMilliseconds)
      const tYear = today.getFullYear()
      let tMonth = today.getMonth()
      let tDate = today.getDate()
      tMonth = thi