虽然很多时候后端会把分页，搜索，排序都做好，但是有些返回数据并不多的页面，或者其他原因不能后端分页的通常会前端处理，而前端分页一般会涉及：表格数据的搜索，表格分页，排序，有些需要加一列序号。实现效果如下：

目录

表格数据

表格分页

表格序号

前端排序

搜索

---

表格数据

这里以this.showData来存放表格的数据，

showData: [],

表格分页

我们需要引用一下el-pagination组件，因为就几个页面是前端分页，所以我是没有封装的

<div class="block">
        <el-pagination
          :total="showData.length"//因为是前端分页，所以，showData是获取的表格所有数据
          :current-page="query.page"
          :page-size="query.page_size"
          :page-sizes="[5, 10, 20, 50, 100]"
          layout=" total, sizes, prev, pager, next"
          background
          @current-change="handleCurrentChange"//页面跳转
          @size-change="handleSizeChange"//选择pageSize
        ></el-pagination>
      </div>

query: {
        page: 1,
        page_size: 10
      },

 分页有两个常用方法，跳转页面与改变页数，如下：

 handleSizeChange(val) {
      this.query.page = 1
      this.query.page_size = val
    },
    handleCurrentChange(val) {
      this.query.page = val
    },

表格序号

给表格加序号，如下：

加序号需要和分页组件互动，这里先在表格里面添加“序号”列，因为是vue3 ，所以用template，加一个插槽，方法为getIndex(scope.$index)，

    <el-table
        size="medium"
        style="width: 100%"
          empty-text="暂无数据"
          :data="showData.slice((query.page - 1) * query.page_size, query.page * query.page_size)"
          scrollbar-always-on
          @sort-change="sort_change"//排序
        >
          <el-table-column label="序号" type="index" width="60">
            <template #default="scope">
              <span v-text="getIndex(scope.$index)"></span>
            </template>
          </el-table-column>
 <el-table-column
            label="操作"
            width="280px">
            <template #default="scope">
              <span @click="seeSubjects(scope.row)">
                <el-link type="primary" :underline="false" style="line-height: 18px">查看</el-link>
              </span>
            </template>
          </el-table-column>
    </el-table>

 这里根据之前定义的当前的页数page和每页的大小page_size计算出序号。注意一定要传index。

 //获取表格序号
    getIndex(index) {
      return (this.query.page - 1) * this.query.page_size + index + 1
    },

至此表格的分页与排序🆗了。

前端排序

因为以及前端分页了，排序也可以前端去排了。

排序的方法是sort_change（）,这个方法自带参数。

 sort_change(column) {
      // column是个形参，具体查看element-ui文档
      if (this.search != '') {
        this.showData = this.tableData
          .filter((data) => {
            return Object.keys(data).some((key) => {
              if (this.SearchData.indexOf(key) > -1) {
                return String(data[key]).toLowerCase().indexOf(this.search.toLowerCase()) > -1
              }
            })
          })
          .sort(this.sortFun(column.prop, column.order === 'ascending'))
      } else {
        // eslint-disable-next-line vue/no-mutating-props
        this.showData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'))
      }
      this.query.page = 1
    },

 sortFun(attr, rev) {
      //第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
      if (rev == undefined) {
        rev = 1
      } else {
        rev = rev ? 1 : -1
      }
      return function (a, b) {
        a = a[attr]
        b = b[attr]
        if (a && b) {
          console.log(a, b, 999)
          if (a < b) {
            return rev * -1
          }
          if (a > b) {
            return rev * 1
          }
        }
        return 0
      }
    },

前端排序的时候，如果不是全部分页，可以在每一列里加Custom，代表自定义排序方法

 <el-table-column :sortable="custom" ></el-table-column>

搜索

<span style="margin-right: 8px; font-size: 16px">搜索</span>
<el-input v-model="search" style="width: 30%" size="large" placeholder="请输入搜索关键字"></el-input>

搜索的字段是search,它的方法是search_change（）

 

search_change() {
      this.showData = this.tableData.filter((data) => {
        return Object.keys(data).some((key) => {
       //2023.03.10修改，这里的一段代码并不需要，只在tableData2中检索就可以达到模糊查询
            return String(data[key]).toLowerCase().indexOf(this.search.toLowerCase()) > -1
          
        })
      })
    },

这里面涉及一个字段，SearchData,这里是在获取数据表格时，复制数据表格数据的表格。

搜索里，如果需要实时搜索，那么可以加一个监听，当输入框的内容变化时，就去搜索。如图：

 watch: {
    search(newVal, oldVal) {
      this.search_change()
    }
  },

以上时常见的前端表格相关的处理操作。