vue quasar 透過process.env動態傳遞變數到web內

使用qusar建立vue網頁

可透過執行quasar dev執行或quasar build產生編譯檔案

如果希望可以

例如透過產生quasar build產生開發區或正式區的網站內容

但測試區與正式區取用資料的api是不相同的

希望可以透過

stage=master quasar build 建立正式區網頁

stage=develop quasar build 建立測試測網頁

在指令列上設定的環境變數stage

要如何讀取並轉換成在網頁上可讀取到?

在執行quasar cli 也就是nodejs

會載入quasar.conf.js

在這裡可以使用process.env.stage拿到在cli上設定的stage值

只要帶到 build的env下即可以在web內使用

ex

quasar.conf.js

module.exports = configure(function (ctx) {

  return {

    ..

    build: {

      env: {

        stage: process.env.stage

      },

      ..

    }

  }

在vue頁面或前端的js內

可以用process.env.stage

這邊要注意

quasar.conf.js

內的process.env是nodejs的環境變數

vue內的

process.env是 前端頁面拿到的設定變數

quasar 為內定emit handler加入更多的傳遞參數

在handler加入要另外傳遞的參數

例如當要接收checkbox的input event

handler能接收到的只有val 與evt這兩個參數

<q-checkbox v-model="selected" :val="item.id" @input="inputHandler">

inputHandler(val, evt){

}

但如果需要再多傳遞參數到handler

可以改寫為以下

就可以傳遞更多的自訂參數給handler

<q-checkbox v-model="selected" :val="item.id" @input="(val, evt) => inputHandler(val, evt, my_var)">

inputHandler(val, evt, myvar){

}

quasar q-table未顯示全部資料

使用案例在使用q-table顯示一個明細的列表

不做分頁 但資料卻只顯示部份

需要加上設定

:rows-per-page-options="[0]"

ex:

<q-table

  ...

  :rows-per-page-options="[0]"

>

quasar table在不同尺寸device 顯示不同欄位

不同於RWD操作div的顯示
如果資料以table呈現 但需要在小尺寸顯示比較少的欄位
可以用到 visible columns
標準以columns設定所有的顯示欄位
visible-columns的內容則是欄位名稱的array
如果有設定visible-columns prop
則真正顯示的欄位會是
columns內設定required:true的欄位+visibleColumns設定的欄位
要讓不同尺寸的device去顯示不同的欄位
只要在檢查尺寸的時候改變visible-columns的值即可

以下範例
在小尺寸的device上只會顯示 M_DAY(required:true所有的尺寸都必要顯示的)
與M_SMALL(來自visbleColumns設定的)

<template>
 <q-table
    :data="items"
    :columns="columns"
    :visible-columns="visibleColumns"
    ...
</template>
<script>
..
data () {
  return {
    items: [],
    columns: [ // 欄位宣告
      { name: 'M_DAY',
        required: true,
        label: '交易日期',
        field: 'T_DAY',
        
      },
      { name: 'M_TIME',
        label: '交易時間',
        field: 'T_TIME',
        format: (val, row) => moment(val, 'hhmm').format('hh:mm')
      },
      { name: 'M_SMALL',
        label: '交易時間',
        field: 'T_TIME',
        format: (val, row) => moment(val, 'hhmm').format('hh:mm')
      },...
    },
    visibleColumns: ['M_SMALL']
  }
}
created () {
  if (this.$q.screen.lt.sm) {
    this.visibleColumns = ['M_TIME']
  }
}
</script>

quasar table 取server資料 分頁使用

1.元件設定
  1.rows-per-page-options：設定option供選擇每頁顯示幾筆(對應rowsPerPage)
  2.pagination: 對應分頁設定
  3.@request:當在分頁物件上按上下頁或是切換每頁顯示幾筆都會被觸發的handler
    handler接收到的參數props並非現在物件上的pagination設定值
    而是要變成的pagination

<q-table
  :data="items"
  :rows-per-page-options="[50,100]"
  :pagination.sync="pagination"
  @request="onRequest"
>

2.script
  1.設定pagination物件
    page: 目前第幾頁 要操作載下一頁 需要將第幾頁更新回這裡
    rowsPerPage: 每頁幾筆,當在元件操作切換要顯示的數量，要寫回這裡
    rowsNumber: 總筆數，這要由server取得的資料來更新
  2.doQuery真正執行server查詢的function
    在執行真正查詢所需要的分頁參數 ex取第二頁資料
    這些值都是由pagination設定值拿來當作參數
    pagination設定值會因為元件的操作而動態變化
  3.設定的onRequest handler
    當在分頁物件上按上下頁或是切換每頁顯示幾筆都會被觸發的handler
    handler接收到的參數props並非現在物件上的pagination設定值
    而是要變成的pagination
    要將取得的資料寫回pagination 再執行查詢
    執行查詢的doQuery會去讀取pagination內的資料來執行

data() {
  return {
    pagination: {
      items: [], // table要顯示的資料
      page: 1, // 目前第幾頁
      rowsPerPage: 50, // 每頁幾筆
      rowsNumber: 20 // 總筆數
    }
  }
}
methods: {
  async onRequest (props) {
    const { page, rowsPerPage } = props.pagination
    this.pagination.page = page
    this.pagination.rowsPerPage = rowsPerPage
    await this.doQuery()
  },
  async doQuery () {
    // 將pagination內的分頁資料 設定到api所需要吃的參數
    const queryParams = {
      countPerPage: this.pagination.rowsPerPage
      currentPage: this.pagination.page
    }
    // 假設呼叫api 吃queryParams參數執行server query
    const response = await doAPIfetch(queryParams)
    // 假設api回傳 data(查詢結果) 與meta(包含分頁資料)
    this.items = response.data
    this.meta = response.meta
    // 將分頁資訊取得的資料總量寫回pagination.rowsNumber
    this.pagination.rowsNumber = this.meta.total
  }
}