首页 > 其他分享 >vue el-date-picker多选日期时间时,支持时间排序

vue el-date-picker多选日期时间时,支持时间排序

时间:2023-01-11 17:15:04浏览次数:41  
标签:picker el vue watch value date 排序

需求背景:

当el-date-picker可以多选日期时,时间的顺序是按照选择的顺序来的,体验不是很好。需要在选时间的同时进行时间排序

 

解决方案:

使用watch监听v-model绑定的值的变化,然后进行时间排序

 

代码示例:

html

    <el-date-picker
      type="dates"
      v-model="value"
      placeholder="选择一个或多个日期"
      >
    </el-date-picker>

 

data

  data() {
  return {
   value: []
    }
  },

 

watch
  watch: {
    value(newV, oldV) {
      if (newV != oldV && newV) {
        this.value.sort(this.orderSort)
      }
    }
  },

 

methods

    orderSort(a, b) {
      return new Date(a).getTime() - new Date(b).getTime()
    },

  

 

标签:picker,el,vue,watch,value,date,排序
From: https://www.cnblogs.com/applesky/p/17044319.html

相关文章

  • 121. Best Time to Buy and Sell Stock [Easy]
    121.BestTimetoBuyandSellStockYouaregivenanarraypriceswhereprices[i]isthepriceofagivenstockontheithday.Youwanttomaximizeyourprof......
  • el-date-picker组件日期显示错误,前一天
    原文链接:https://blog.csdn.net/qq_14993591/article/details/126411913使用element-uiDatePicker日期选择器,选中日期是2021-08-02至2021-08-03,浏览器中日期的值是2021......
  • 怎样做excel数据透视表?
    作为一名老师,我时常需要对学生的成绩进行统计分析,有时还会用到Excel数据透视表。用过的人都知道,使用Excel制作透视表需要用到分组、求和等函数,复杂的函数对我这个Excel......
  • 如何用 Excel 做数据分析,提升你的工作效率?
    日常工作中你是否经常使用Excel制作报表?你是否为制作报表耗费了大量的时间?是否感觉到自己的效率低下?是的,是时候提升效率了。在我不知道DataEase这款开源数据分析工具之......
  • Linux环境下监听端口号并向指定端口发送字符串消息数据(nc,telnet,netstat)
    1.下载netcat,用于监听端口yuminstallnc2.下载net-tools,用于查看端口号使用情况yuminstall-ynet-tools3.下载telnet,用于向端口号发送消息yuminstall-ytelnet4.监听......
  • Vue多选问卷设计
    需求:智能中医项目需要在医院端设计一个填写多选的问卷模块,医生根据选项提示填写患者相关信息,用来存储中医中五脏六腑的信息。提交的问卷,可以在展示页面进行浏览,浏览已勾选......
  • Echarts —自定义label标签的样式(formatter,rich,添加图标等操作)
    最近公司项目中在使用Echarts绘制图表时,由于默认的label标签不能满足设计稿需求,所以研究了对label标签进行格式化的方案,了解到可以使用formatter内容格式器对标签内......
  • powershell安装字体
    参考  Install-Fonts(powershellweekly.com)使用-File开关Install-Fonts-File“c:\Fonts\FontName.ttf”选择一个文件使用-Files开关安装字体-Files“c:\Fonts......
  • 初始化获取Excel表头
    工具类中获取title方法/*初始化获取表头*/publicstaticList<String>getTitles(MultipartFilefile)throwsIOException{try(InputStreaminputStream......
  • VISUALBERT: A SIMPLE AND PERFORMANT BASELINE FOR VISION AND LANGUAGE论文阅读笔记
    摘要作者提出了VisualBERT这一框架,其由一系列的Transformerlayer组成,通过selfattention将文本与图像隐式地对齐,甚至对于语法关系也很敏感。方法VisualBERT方法的核心......