Skip to main content

3-3. 查詢頁面實作練習

建立練習專案​

  1. 使用課程part2第一個章節內練習建立的專案
  2. 安裝Mock.js
npm install mockjs
  1. 安裝axios
npm install axios
  1. 將以下連結內的所有資料夾複製到專案的src資料夾內
  2. 安裝套件moment、js-xlsx、script-loader、file-saver
npm install moment xlsx script-loader file-saver

練習製作查詢頁面​

  1. 查詢選單：

    1. 學校（下拉選單。開啟頁面時使用api/index.js裡的函式schoolGet取得學校選單資料）
    2. 帳號（文字輸入框）
    3. 姓名（文字輸入框）
    4. 開始日期（datetime-picker）
    5. 結束日期（datetime-picker）

  2. 製作查詢按鈕，查詢函式為api/index.js裡的函式userGet

  3. 查詢資料時，使用router.push將參數放入query，並使用watch監聽route.query來取得查詢參數

  4. 開啟頁面時使用預設查詢本月資料

  5. 使用element-ui的table來呈現查詢列表，使用pagger來製作分頁

  6. data/searchRecordFormat.js的資料為資料列表所需的欄位資訊

  7. Table上使用v-loading屬性來呈現loading圖示

練習製作匯出功能​

使用以下函式來製作功能：

exportExcel () {
  import('@/vendor/Export2Excel.js').then(excel => {
    if (!this.tableData.length) {
      return
    }
    const data = this.tableData.map(d => {
      return this.searchRecordFormat.map(f => d[f.index] || '')
    })
    const header = this.searchRecordFormat.map(f => f.title)
    const dateString = moment().format('YYYY-MM-DD')
     excel.export_json_to_excel({
      header, // 表頭
      data, // 資料
      filename: `document_${dateString}`, // 非必填
      autoWidth: true, // 非必填
      bookType: 'xlsx' // 非必填
    })
  })
}

完成範例​

image-20230109092738477

info
  • 本範例的 vue-cli專案路徑：examples/3-3_data_table