前言

框架： Nuxt + vuejs

组件库：vuetifyjs

涉及组件：v-data-table/v-pagination/v-list

数据表单与分页

<v-data-table
  :headers="headers"
  :items="posts"
  :page.sync="page"
  :items-per-page="itemsPerPage"
  hide-default-footer
  class="elevation-1"
>
</v-data-table>
<v-pagination
  v-model="page"
  :length="pageLength"
  :total-visible="pageVisible"
  circle
  @input="onPageChange"
>
</v-pagination>

data(){
	return {
    	page: 1,//当前页面号
        itemsPerPage: 10,//每页条目数
        pageLength: 20,//总页面数
        pageVisible: 7,//分页条中可见页面号数
        headers: [//id title content dataTime viewCount commentCount
          {
            text: 'id',
            align: 'start',
            sortable: false,
            value: 'id'
          },
          {
            text: '标题',
            value: 'title',
            sortable: false,
          },
          {
            text: '发表时间',
            value: 'dateTime',
            sortable: false,
          },
          {
            text: '浏览数',
            value: 'viewCount',
            sortable: false,
          },
          {
            text: '评论数',
            value: 'commentCount',
            sortable: false,
          },
          {
            text: '点赞数',
            value: 'likeCount',
            sortable: false,
          },
          {
            text: '发表人',
            value: 'publisher',
            sortable: false,
          },
          {
            text: '版块',
            value: 'topic',
            sortable: false,
          }
        ],
    }
}

数据列表与分页

<v-list two-line>
          <v-list-item-group
            :page.sync="page"
          >
            <template v-for="(post, index) in posts">
              <v-list-item
                :key="index"
                @click="handlePostClick(post.id)"
              >
                <template >
                  <table style="margin:auto;
                                margin-left:4px;">
                  <v-list-item-content>
                    <table style="text-align:left;
                                  font-size:30px;
                                  font-wight:bold;">
                      <th>
                        <v-list-item-title v-text="post.title"
                                            style="font-size:20px;
                                                   font-wight:bolder;"/>
                      </th>
                    </table>
                    <br/>
                    <br/>
                    <table>
                      <tr style="text-align:left;
                                  font-size:15px;
                                  font-weight:bold;">
                        <v-list-item-subtitle v-text="'作者：'+post.publisher">
                        </v-list-item-subtitle>
                      </tr>
                      <tr>
                        <td style="text-align:left;">
                          <span>
                            <v-chip
                                    label
                                    color="pink"
                                    text-color="white"
                                    >
                              <v-icon left>mdi-label</v-icon>
                              {{post.topic}}
                            </v-chip>
                          </span>
                        </td>
                        <td style="text-align:right;
                                    width:1000px">
                          <span class="grey--text text--darken-1">
                            <v-icon small>mdi-comment</v-icon>
                            <small v-text="post.commentCount"/>
                          </span>
                          <span class="grey--text text--darken-1 mx-3">
                            <v-icon small>mdi-cards-heart</v-icon>
                            <small v-text="post.likeCount"/>
                          </span>
                          <span class="grey--text text--darken-1">
                            <v-icon small>mdi-eye</v-icon>
                            <small v-text="post.viewCount"/>
                          </span>
                        </td>
                        <td style="width:200px;
                                    text-align:right;">
                          <v-list-item-action>
                          <v-list-item-action-text v-text="'发表于 '+post.dateTime">
                          </v-list-item-action-text>
                          </v-list-item-action>
                        </td>
                      </tr>
                    </table>
                   </v-list-item-content>
                  </table>
                </template>
              </v-list-item>
              <v-divider>
              </v-divider>
            </template>

          </v-list-item-group>
        </v-list>
        <v-pagination
          v-model="page"
          :length="pageLength"
          :total-visible="pageVisible"
          circle
          @input="onPageChange"
        >
        </v-pagination>

涉及参数同上

渲染画面如下： （PS：里面的页面数是后端请求来的计算过的，如果给定pageLength，则总共页面数为给定值）

后端每次根据header返回当前请求页的数据，故监听翻页事件onPageChange

 async onPageChange(page) {
        this.page = page;
        await this.getData();
      },