element Table+Pagination实现分页

喜欢ヅ旅行 2022-08-30 01:46 288阅读 0赞

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

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

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

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

Table组件表头：

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

：data：表格展示的数据

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

prop ： 对应列内容的字段名

label：定义表格的列名

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

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

<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>