Vue+elementUI前端随笔

一、picker-options参数设置日期选择范围

<el-date-picker
  v-model="自己设置"
  type="datetimerange"
  :picker-options="pickerOptions"
  range-separator="至"
  start-placeholder="移交开始日期"
  end-placeholder="移交结束日期"
  align="center"
  style="width:22vw; margin-left: 20px"
  size="mini">
</el-date-picker><details>
data() {
  return {
    //日期选择器 近一周 近一个月 近三个月
    pickerOptions: {
      shortcuts: [{
        text: '最近一周',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit('pick', [start, end]);
        }
      }]
    },
  }
}

二、Vue element el-table-column标签中对日期进行格式化（全局过滤器）

1、安装时间格式化插件

npm install vue-moment --save

2、在main.js中引用

import moment from 'moment'

Vue.use(require('vue-moment'));
Vue.prototype.moment = moment;

3、在main.js中加入日期格式化的过滤器，其中dateYMDHMSFormat为方法名称

Vue.filter('dateYMDHMSFormat',function(dateStr,pattern='YYYY-MM-DD HH:mm:ss'){
  return moment(dateStr).format(pattern);
})

4、使用

<el-table-column prop="date" label="时间">
    <template slot-scope="scope">{{scope.row.date| dateYMDHMSFormat}}</template>
</el-table-column>