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

最新推荐文章于 2025-02-18 23:34:27 发布

是谁的心儿啊

最新推荐文章于 2025-02-18 23:34:27 发布

阅读量1.5k

点赞数

分类专栏： antd-design-vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/dashinihao/article/details/117414893

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)