quasar ui组件的使用记录

最新推荐文章于 2024-05-30 16:07:02 发布

恩婧

最新推荐文章于 2024-05-30 16:07:02 发布

阅读量670

点赞数

分类专栏：前端开发 javascript 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/zyqgt960812/article/details/111559862

版权

前端开发同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

javascript

13 篇文章 0 订阅

订阅专栏

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 {
          }
        });
    },