Vue implements multi-condition fuzzy search and is compatible with paging

Realize multi-condition fuzzy search and compatible paging: the
search method is as follows:

 searchList() {
    
    
        const arr = [...this.tableList] // 返回的所有数据
        const searchObj = {
    
    userName: this.searchForm.userName, userTelNum: this.searchForm.userTelNum}  //根据输入的用户名和手机号模糊查找
        const filterArr= arr.filter(item => {
    
    
          return Object.keys(searchObj).every(key => {
    
    
            return item[key].includes(searchObj[key])
          })
        })
        this.total = filterArr.length  // 符合条件的总条数
        this.tableData = this.pageBySize([...filterArr], this.searchForm.page, this.searchForm.limit) // 分页
      },

Paging method:

 pageBySize(arr, page, size) {
    
    
    return arr.splice((page-1)*size, size)
 }

Guess you like

Origin blog.csdn.net/weixin_44692296/article/details/108409027