Whbbit博客开发日记（二）

08-04 10:51

今天尝试使用quasar的pagination结合table来写一个带有分页的表格，期间因为英文的不熟悉导致差点没坚持下来。惊险🤣

现来说一下思路，因为平时工作中使用的vue2和elementUI所以就想能不能让quasar 的表格变成符合我现在使用技术栈的格式。看了一下quasar的各种插槽实在是太多了，大家一定要看官方文档啊！！！！

基本html结构

<template>
  <q-table
    class="q-mt-md"
    title="标签"
    :rows="data.tags"
    :columns="columns"
    row-key="name"
    :pagination="pagination"
    hide-pagination
  >
    <template v-slot:top-right>
      <q-btn
        push
        color="primary"
        label="添加标签"
        icon="add"
        @click="handleItem = true"
      />
    </template>
    <template v-slot:body-cell-operate="operate">
      <q-td :props="operate">
        <q-btn flat size="sm" color="primary" @click="editItem(operate)"
          >编辑</q-btn
        >
        <q-btn flat size="sm" color="negative" @click="remove(operate)"
          >删除</q-btn
        >
      </q-td>
    </template>
  </q-table>

  <q-footer elevated>
    <q-toolbar class="bg-white flex justify-end q-py-sm">
      <q-btn flat color="primary">共 {{ total }} 条</q-btn>
      <q-pagination
        v-model="current"
        :max="maxPage"
        :max-pages="6"
        direction-links
        boundary-links
        color="primary"
        icon-first="skip_previous"
        icon-last="skip_next"
        icon-prev="fast_rewind"
        icon-next="fast_forward"
      />
      <q-btn flat color="primary">每页10条</q-btn>
    </q-toolbar>
  </q-footer>
  <!-- 添加编辑弹窗 -->
  <q-dialog v-model="handleItem">
    <q-card style="width: 700px; max-width: 80vw;">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">标签</div>
        <q-space />
        <q-btn icon="close" flat round dense @click="closeDialog" />
      </q-card-section>

      <q-card-section>
        <q-input v-model="tag" label="tag" autofocus />
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat @click="closeDialog">取消</q-btn>
        <q-btn flat color="primary" @click="operationItem">
          {{ id ? "编辑" : "添加" }}
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

vue3 template 中可以有多个根标签了，不必在为了一个根标签多写一层 div 了，好评🤩

分页主要部分在q-footer中，q-table自带的分页可以用 hide-pagination 隐藏起来

Js 部分

分页部分q-table自带的不是很符合我的使用习惯，刚好官方有隐藏自带分页的属性，那就索性将其隐藏起来。使用其分页组件来完成分页的功能。

1. 实现q-table和分页组件数据的联动

   这里我使用了watch属性来监听

   // 声明表格所需要的分页数据
   const pagination = reactive({
   	page: 1,
   	rowsPerPage: 10,
   })
   // 声明分页组件的数据
   const current = ref(1) // 当前也
   const limit = ref(10) // 为后面可能改变每页显示条数做准备，确保页面中没有写死的数据
   // watch监听current的变化
   watch(current, () => {
   	pagination.page = current.value;
   	// 重新从数据库中获取数据
   	fetch()
   })
   // 在watchEffect中将分页页码计算出来
   // total是从数据库中获取的所有数据的总量
   watchEffect(() => {
   maxPage.value = Math.ceil(total.value / current.value)
   })
   

看一下完成的效果吧