记录一下前端处理列表搜索及排序分页

最新推荐文章于 2023-09-10 11:56:28 发布

weixin_43981576

最新推荐文章于 2023-09-10 11:56:28 发布

阅读量191

点赞数

文章标签：前端 javascript elementui vue.js

本文链接：https://blog.csdn.net/weixin_43981576/article/details/130765796

版权

这里是表格的处理

el-table里加入

 @sort-change="tableDataRank"

el-table-column中这么写

 <el-table-column
    prop="storeAge"
    align="center"
    min-width="120"
    sortable  //这里是添加的排序
    label="库龄">
</el-table-column>

这是处理的代码

 // 这是表格中自带的用来获取排序类型和字段
      tableDataRank(row,column){
        let vm = this;

        if(row.order == "ascending"){
          vm.search.sort_type=2
          vm.search.sort_field= row.prop;
        }else if(row.order == "descending"){
          vm.search.sort_type=1
          vm.search.sort_field= row.prop;
        }else{
          vm.search.sort_type=''
          vm.search.sort_field= '';
        }
        vm.searchGoodsList();
      },
//这里是搜索处理
      searchGoodsList(){
        let vm=this;
        // 使用 Array.filter() 方法过滤数组对象，搜索字段处理
        let result =  vm.tableData.filter((user) => {
          let matchName=[],matchCity=[];
          if(vm.search.goods_name)
// 过滤商品名称
matchName = user.goods_name.toLowerCase().includes(vm.search.goods_name.toLowerCase()); 
          if(vm.search.erp_no)
            //过滤商家编码
             matchCity = user.erp_no.toLowerCase() === vm.search.erp_no.toLowerCase(); 
          // 返回两个条件的并集
          return matchName && matchCity;
        });
        /*排序*/
        // console.log(vm.search.sort_type,vm.search.sort_field,Number(result[0][vm.search.sort_field]))
        for(let val in result){
          result[val].stock = result[val].stock*1
          result[val].stock = result[val].storeAge*1
        };
        if(vm.search.sort_type ==1){
          result.sort(function(a, b) {
            return b[vm.search.sort_field]*1 - a[vm.search.sort_field]*1;
          });
        }
        if(vm.search.sort_type ==2){
          result.sort(function(a, b) {
            return a[vm.search.sort_field]*1 - b[vm.search.sort_field]*1;
          });
        }
        // 分页
        let startIndex = (vm.page - 1) * vm.pageSize;
        let endIndex = startIndex + vm.pageSize;
        vm.searchData = result.slice(startIndex, endIndex);
        return
      },

这个是用来自己看的，仅仅作为参考。