Vue2+element-plus 表格el-table前端分页、排序、搜索与加序号

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

目录

表格数据

表格分页

表格序号

前端排序

搜索

---

表格数据

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

showData: [],

表格分页

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

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

 这里根据之前定义的当前的页数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，代表自定义排序方法

搜索

搜索

搜索的字段是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()
    }
  },

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