VUE项目后台管理系统--vue+elementUI组件table实现前端分页功能+前端模糊查询功能

        前端后台管理会存在很多表格，表格数据过多就需要分页，前端交互每次搜索如果都请求服务器会加大服务器的压力，所以在数据量不是很大的情况下可以一次性将数据返回，前端做检索。

---

效果

---

一、查询条件

代码如下（示例）：

<div style="margin-left: 20px">
   <el-form :inline="true" :model="formQuery" class="demo-form-inline">
     <el-form-item label style="margin-right: 10px">
       <el-input placeholder="航线名称" clearable prefix-icon="el-icon-search" 
        v-model="formQuery.routeName">
        </el-input>
        </el-form-item>
      <el-form-item label style="margin-right: 10px">
         <el-select v-model="formQuery.deptId" filterable clearable placeholder="选择部门">
           <el-option v-for="item in departmentList" :key="item.deptId" 
            :label="item.name" :value="item.deptId">
            </el-option>
          </el-select>
       </el-form-item>
       <el-form-item label style="margin-right: 10px">
          <el-select v-model="formQuery.routeType" filterable clearable 
               placeholder="航线分类">
            <el-option v-for="item in routeTypeList" :key="item.id" :label="item.name"             
               :value="item.id"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item class="overall" style="margin-right: 10px">
         <el-button type="primary" icon="el-icon-search" @click="queryBtn">查询</el-button>
        </el-form-item>
    </el-form>
</div>

二、页面展示

（1）分页展示

<!-- 分页区域 -->
 <div class="pages">
  <el-pagination background @current-change="handleCurrentChange" 
    @size-change="handleSizeChange":current-page.sync="current" :page-size="pageSize"                     
    :page-sizes="[5, 10, 15, 30]"
    layout="total, sizes,prev, pager, next, jumper" :total="total">
 </el-pagination>
</div>

@size-change的属性：绑定当前页数量的事件，当前页数量变化时，触发SizeChange方法@current-change的属性：改变当前页时会触发事件
:current-page 的属性：绑定当前第几页
:page-size 的属性：绑定当前有几条数据
:total=“total” 这个是绑定一个变量保存数量总数

（2）表格数据

<el-table ref="multipleTable" :data="tableData" border height="700" 
  @selection-change="handleSelectionChange" v-loading="loading" element-loading-text="正在加 
  载中" style="overflow-y: auto">
  <el-table-column type="selection" width="80"></el-table-column>
  <el-table-column type="index" label="序号" width="100" :index="indexMethod">
  </el-table-column>
  <el-table-column prop="routeInfo.routeName" label="航线名称"></el-table-column>
  <el-table-column prop="routeInfo.routeType" label="航线类型">
    <template slot-scope="scope">
      {{ scope.row.routeInfo.routeType ? "精细化" : "通道巡检" }}
     </template>
   </el-table-column>
   <el-table-column prop="routeInfo.deptName" label="部门"></el-table-column>
   <el-table-column prop="routeInfo.createTime" label="创建时间"></el-table-column>  
</el-table>

（3）绑定以上的变量：

export default {
  data() {
    return {
        formQuery: {
           routeName: "",
           deptId: "",
           routeType: "",
        },
        tableData: [],
        current: 1, // 当前页码
        total: 0,
        pageSize: 10,  // 每页显示多少条
        isClickSearch: false, // 当点击搜索时 对底部分页进行判断
      }
   }
}

（4）此处是条件查询的数据：

// 表格查询
queryBtn() {
  this.isClickSearch = true; // 当点击搜索时 对底部分页进行判断
  const formQuery = this.formQuery;
   if (!formQuery.routeName) delete formQuery.routeName;
   if (!formQuery.deptId) delete formQuery.deptId;
   if (formQuery.routeType === 0 || formQuery.routeType === 1) {
        formQuery.routeType = parseInt(formQuery.routeType);
      } else {
        delete formQuery.routeType;
      }
   this.current = 1;
   this.getRouteBySearch(this.current, this.pageSize, this.formQuery);
},

（5）此处是分页的绑定事件的处理：（此处省略表格数据的对接）

//改变多少条
handleSizeChange(pageIndex) {
 this.current = 1;
  this.pageSize = pageIndex;
  if (this.isClickSearch) {
     this.getRouteBySearch(this.current, this.pageSize, this.formQuery);//此处走查询接口
   } else {
    this.getList(this.current, this.pageSize);//此处走表格初始化的接口
      }
    },

// 底部分页功能
handleCurrentChange(pageIndex) {
 this.current = pageIndex;
  if (this.isClickSearch) {
   this.getRouteBySearch(this.current, this.pageSize, this.formQuery);//此处走查询接口
    } else {
    this.getList(pageIndex, this.pageSize);//此处走表格初始化的接口
    }
 },

---

总结

大家有什么疑问，可以留言哈。

感谢大家的观看~