技術標籤：前端開發javascriptjavascriptvue.js

1、關於自定義頁碼 quasar pagination

• 根據客戶需求定製頁碼選項
  

//table元件的相關屬性
:rows-per-page-options = [10,50,500]

//完整程式碼
//html
 <q-table      
      class="q-mr-sm q-ml-sm q-mt-md" 
      title="開機時長"
      separator='cell'
      :data="data"
      :columns=
 
"columns"
      rows-per-page-label="每頁資料"
      color="primary"
      :rows-per-page-options = [10,50,500]
      :pagination.sync="Msgpagination"
      @request="tableRequestMsg"
      row-key="id"
    >
      <template v-slot:body="props"
 
>
        <q-tr :props="props">
          <q-td key="zcbh"  :props="props">{{ props.row.zcbh }}</q-td>
          <q-td key="pl_name" :props="props">{{  props.row.pl_name }}</q-td>
          <q-td key="ip" :
 
props="props">{{  props.row.ip }}</q-td>         
        </q-tr>
      </template>
    </q-table> 

//對應js片段程式碼
page: 1,
limit: 10,
columns:[],
Msgpagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 0,
      },


 tableRequestMsg(pv) {
      var pageinfo = pv.pagination;
      this.page = pageinfo.page;
      this.Msgpagination.rowsPerPage = pageinfo.rowsPerPage;
      this.Msgpagination.page = pageinfo.page;
      this.limit = pageinfo.rowsPerPage;
      this.getPoliceMsg();
    }, 
//警員資訊
getPoliceMsg() {
      let self = this;
      this.$axios
        .post(CONFIG.httphost() + "/MessageShowController/showClientTime", {
          st: this.page,
          limit: this.limit,
        })
        .then((resp) => {
          let res = resp.data;
          let code = res.code;
          console.log(res,'showClientTime')
          if (!code) {
            this.data = res.data;
            var sum = res.sum;
            self.Msgpagination.rowsNumber = sum;
          } else {
          }
        });
    },