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>