element Table+Pagination实现分页

最近做项目时，有一个新需求：做一个列表展示，并且用上分页。

项目背景：前端框架是vue，我们的项目是电脑端，因此我们选择了element组件库

做一个列表展示，我们首先可以想到element的Table表格

首先，使用一个别人封装好的组件，基础的一定是最精华的，最基础的，我们想使用这个组件，最基础的的一定要有

Table组件表头：

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

template标签：HTML5提供的新标签，更加规范和语义化；可以把列表项放入template标签中，然后进行批量渲染。简单理解的话，可以把我们页面的HTML或者HTML+CSS放到template标签中，更加规范，方便进行批量渲染

：data：表格展示的数据

el-table-column：表格的每一列

prop ：对应列内容的字段名

label：定义表格的列名

我们只需要把prop和label替换成我们项目中对应的名字即可

接下来，我们说分页，直接想到了element的 Pagination 分页

<div class="block">
    <span class="demonstration">显示总数</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>

<span class="demonstration">显示总数</span>：这个为了给我们区分做的标识，实际上我们使用这个组件的时候是不需要的

@size-change="handleSizeChange"：每页显示条目改变时会触发

@current-change="handleCurrentChange"：当前页数改变时会触发

:current-page.sync="currentPage1"：当前页数默认为第一页

:page-size="100"：每页的大小默认为100

layout="total, prev, pager, next"：组件布局（总页数，前面的页数，当前页，后面的页数）

:total="1000"：总页数为1000

这里，我们选择的不是一个最基础的分页功能，因为它不能满足我们的需求

关于total，我们需要从库里查询出来，所以我们需要改成变量

下面看一下我们的代码：

      //我们在Table表格上加了一个根据文件名称模糊查询的搜索框
      <div class="handle-box">
        <el-input
          v-model="query.name"
          placeholder="文件名"
          class="handle-input mr10"
        ></el-input>

        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
      </div> 
      <el-table
        :data="tableData"
        stripe
        border
        class="table"
        //这里我们添加了点击这一行的触发事件
        @row-click="openDetails"
      >
       //这里我们为了点击这一行能获取到id，但是页面不需要显示，我们用了v-if 
       <el-table-column
          v-if="false"
          prop="id"
          width="100"
          label="主键"
          //内容过长时隐藏，默认为false
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          prop="name"
          width="100"
          label="文件名"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          prop="type"
          width="100"
          label="文件类型"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          prop="length"
          width="100"
          label="文件大小"
        ></el-table-column>

        <el-table-column
          prop="uploadTime"
          width="100"
          label="上传时间"
        ></el-table-column>

        <el-table-column
          prop="url"
          width="350"
          label="文件地址"
        ></el-table-column>
        //这里根据我们的业务需求，满足某些条件的时候按钮才可用
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <div
              v-if="
                ['video', 'application', 'audio', 'pdf'].includes(
                  scope.row.type
                )
              "
            >
              <el-button
                type="text"
                icon="el-icon-plus"
                class="blue"
                @click="addQuestion(scope.row)"
                >添加问题</el-button
              >
            </div>
            <div v-else>
              <el-button type="text" icon="el-icon-plus" disabled
                >添加问题</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

element Table+Pagination实现分页

猜你喜欢