< el - form ref = "searchForm" : model = "searchForm" label - width = "100px" > < el - form - item label = "文章状态：" > < el - radio v - model = "searchForm.status" label > 全部 < / el - radio > < el - radio v - model = "searchForm.status" : label = "0" > 草稿 < / el - radio > < el - radio v - model = "searchForm.status" : label = "1" > 待审核 < / el - radio > < el - radio v - model = "searchForm.status" : label = "2" > 审核通过 < / el - radio > < el - radio v - model = "searchForm.status" : label = "3" > 审核失败 < / el - radio > < / el - form - item > < el - form - item label = "频道列表：" > < el - select v - model = "searchForm.channel_id" placeholder = "请选择频道" > < el - option v - for = "item in channelList" : key = "item.id" : label = "item.name" : value = "item.id" > < / el - option > < / el - form - item > < el - form - item label = "时间选择：" > < el - date - picker v - model = "timetotime" type = "daterange" range - separator = "至" start - placeholder = "开始日期" end - placeholder = "结束日期" value - format = "yyyy-MM-dd" > < / el - date - picker > < / el - form - item > < / el - form > < / div > < / template > < script > export default { name : "Article" , data ( ) { return { timetotime : "" , //一个临时的接收时间的成员 searchForm : { beginTime : "" , //开始时间 endTime : "" , //结束时间 status : "" , //""-全部，0-草稿，1-待审核，2-审核通过，3-审核失败 channel_id : "" //频道id channelList : [ ] , //频道列表 watch : { // 被检测的成员：function(newV,oldV){ //newV:数据变化后的样子，oldV:数据变化前的样子 //被检查成员一般就是data成员 timetotime : function ( newV ) { //把接收到的时间信息一分为二的给beginTime和endTime if ( newV ) { this . searchForm . beginTime = newV [ 0 ] ; this . searchForm . endTime = newV [ 1 ] ; } else { //清空时间 this . searchForm . beginTime = "" ; this . searchForm . endTime = "" ; created ( ) { this . getChannelList ( ) methods : { //获取频道列表的数据 getChannelList ( ) { let pro = this . $http ( { url : "/mp/v1_0/channels" , methods : "get" . then ( data => { // console.log(data); this . channelList = data . data . channels . catch ( err => { return this . $message . error ( "或的频道失败：" + err ) < / script > < style lang = "less" scoped > < / style >

效果如下图所示：

Vue 日期 选择 基于 Vue 的轻量级和移动友好的 日期 时间 选择器 。 Vue 日期 选择强调所有屏幕尺寸上的性能、优雅和可用的 UI 以及配置的简单性。 不依赖于 css 框架或 日期 库。 重量小于 5KB。 文档和演示 vue -element-admin一个基于 vue 2.0 和 Eelement 的控制面板 UI 框架，这是 使用 vue 技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。 推荐指数：star:62.1k Github 地址：https://github.com/PanJiaChen/ vue -element-admin Demo体验：... // main.js file import Vue Datepicker Ui from ' vue - datepicker -ui' import ' vue - datepicker -ui/lib/ vue datepicker ui.css' ; Vue . component ( ' Datepicker ' , Vue Datepicker Ui ) < script > import ' vue - datepicker -ui/lib/ vue datepicker ui.css ' ; import Vue Datepicker Ui from ' vue - datepicker -ui ' ; export default { components : { Datepicker : Vue D 使用 element ui的 datePicker 组件小记 又开始接触 vue 的 后台 管理系统啦，结合饿了么开源ui库开发项目。相信小伙伴们都很熟悉这对cp组合。Today，记录一下最近针对于 datePicker 的 使用 场景，希望能帮助到遇到这些方面问题的小伙伴们~~ 1.当前选择 时间 不能小于当天 日期 比如今天是2020/4/27，当创建一条任务时，开始 时间 只能选择当天或者当天之后的 日期 ： disable... 本以为这是一个很简单的功能，几分钟就搞定。没想到，还是很麻烦的！记录一下开发过程。这里就涉及到了设计模式的一些知识，如果 使用 静态的代码，几乎1000行，这样大学生10W的代码岂不是很容易完成？但如果采用动态的方式，估计至少要减少一半无用的代码，还没改掉。继续前进！ 使用 了Element-ui的Select 选择器 ，不过似乎有些鸡肋，感觉用下拉框就可以解决了，而且饿了么ui的 选择器 感觉也不是很好看。 <template> <div class="date-times-picker"> <el-popover placement="bottom" width="460" trigger="click" v-model="visible" @after-leave="hideHandle"> <div class="date-ti 日期 选择器 ( Datepicker ) A datepicker Vue component. Compatible with Vue 2.x. Works nice on mobile devices. 日期 选择器 Vue 组件。 与 Vue 2.x兼容。 在移动设备上 效果 很好。 安装 (Install) Copy Touch DatePicker . vue component into your ... Vue 时间 日期 选择器 （date-timepicker）组件在 使用 Vue 框架开发 中 使用 非常频繁。 vue timepicker 除了基础选择 日期 时间 外，还有非常多样的功能配合不同场景 使用 ，比如 12/24小时，禁止选择某些 日期 ，高亮某些 日期 ，夜间模式，多语言，酒店订单的特别场景等。本文记录了我自己 使用 多年最好用的 12 款 vue timepicker 组件，每一款都经过我实际测试，推荐给大家。