前段時間參與到一個後臺管理系統的專案中，我來負責前端，但是說實話我的技術是真的菜。

偶然的機會接觸到了element ui發現真的是很好用。對於我這種寫前端的菜鳥，快速開發一個前端頁面是非常容易的了。

先上幾張圖

舉個栗子：

<template>
  <div class="block">
    <span class="demonstration">預設</span>
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="選擇日期時間">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">帶快捷選項</span>
    <el-date-picker
      v-model="value2"
      type="datetime"
      placeholder="選擇日期時間"
      align="right"
      :picker-options="pickerOptions1">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一週前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: ''
      };
    }
  };
</script>
 

根據element ui 提供的模板，很快就能實現時間選擇器的功能

Element UI 是一套採用 Vue 2.0 作為基礎框架實現的元件庫，它面向企業級的後臺應用，能夠幫助你快速地搭建網站，極大地減少研發的人力與時間成本。

自我感覺的話，本週就搞了這麼點前端的東西，另外驗證的東西也寫得差不多了，可是ajax的資料過濾還是不會。

下週要開始學習和寫ajax的資料過濾。