element UI table 过滤 筛选问题、where、orderby重载

 

一、问提描述

　   使用elementUI table 官方筛选案例，发现筛选不是服务器端筛选，而是浏览器端对每一页进行单独筛选。 如何在服务器端筛选？

 二、查询Element UI 官网table组件发现：

　　　　1、Afilter-change事件，说明：当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。参数：filters。

             2、 prop属性，说明：对应列内容的字段名，也可以使用 property 属性。类型 string

　　　  3、filters属性，说明：数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。类型 Array[{test,value}]

　　　  4、column-key属性，说明：column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件  类型：string

三、用法描述

　1.在 el-table 标签 @filter-change="handleFilterChange" ，

　2. 在vue周期函数methods: {}中实现 

　　handleFilterChange 方法：可以监听整个table中过滤条件变化； --这个事件非常重要，这里它还充当了与服务器进行数据交互的入口。这是过滤方法不能提供的，因为过滤方法逐行执行，执行次数太多。

　　setFilter方法：按照服务器api需要的格式组装过滤条件；此处需要在data（{returen{ }}）中定义一个中间变量this.filter:[] ，用来保存和更新过滤条件。
　　getList（）方法：发送请求；

   3 在 el-table-column 列中，当以过滤条件 :filters="userStatusNameFilters"、column-key="UserStatusName"、prop="UserStatusName" 三者缺一不可，且column-key的值必须与prop一致，也就是必须为字段名称"。若不定义column-key的值，那么handleFilterChange （filter）返回值filter对象的名称将会是一个自动生成的值。

  4 在data（）{return{ userStatusNameFilters: [] }} 定义数组 。如果数据是固定不变的可以在js中直接写入值 serStatusNameFilters: [{text：‘管理员’，value：‘管理员’}，{text：‘普通用户’，value：‘普通用户’}] 。如果数据可能有变化，需要从服务器端取值。

四、代码描述：

前端代码：

复制代码
    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      :border="false"
      :stripe="true"
      size="small"
      style="width: 100%;"
      @filter-change="handleFilterChange"

    >

      <el-table-column
        :filters="regionNameFilters"
        column-key="RegionName"
        label="行政区域"
        prop="RegionName"
        align="center"
        width="120px"
      />
View Code
复制代码
复制代码
    getList() {
      this.listLoading = true

      var filters = []
      for (var i in this.filters) {
        // 去除value数组为空的值
        if (this.filters[i].value && this.filters[i].value.length > 0) {
          filters.push({ 'field': this.filters[i].row, 'op': this.filters[i].op, 'value': this.filters[i].value })
        }
      }

      if (filters.length > 0) {
        // 将 JavaScript 值(通常为对象或数组)转换为 JSON 字符串
        this.listQuery.filters = JSON.stringify(filters)
      } else {
        this.listQuery.filters = null
      }

      this.listQuery.query = this.queryInfo

      console.log(filters)
      getList(this.listQuery).then(response => {
        // console.log(response.data.rows);
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },
    // 通过中间变量this.filters数组，保存当前table中所有列过滤条件的变化。
    setFilter(filters) {
      for (var i in filters) {
        var filter = null
        for (var j in this.filters) {
          // 如果filters[i]中存在于this.filter[]相同的值，那么把当前this.filter[i]的引用覆盖filter的引用.
          if (filters[i]['row'] === this.filters[j]['row']) {
            filter = this.filters[j]
          }
        }
        // 如果filter为空，即不存在相同的值，则将当前filter[i]添加到this.filter[]
        if (filter == null) {
          this.filters.push({ 'row': filters[i].row, 'op': filters[i].op, 'value': filters[i].value })
        } else {
          // 如果filter不为空，即存在相同的值。则将filter[i] 赋值给filter，本质是更新this.filter[i]的值。
          filter.value = filters[i].value
          filter.op = filters[i].op
        }
      }

      // console.log(this.filters)
      this.listQuery.page = 1
      this.getList()
    },
    getRegionName() {
      getRegionName().then(response => {
        var temp = []
        for (var i = 0; i < response.data.length; i++) {
          temp.push({ text: response.data[i].RegionName, value: response.data[i].RegionName })
        }
        this.regionNameFilters = temp.slice(0)
        // console.log(this.regionNameFilters)
      })
    },

}
//getList、getRegionName 是对axios异步请求的封装。对应后端的一个api，。
View Code
复制代码

 table结合分页显示：

复制代码
       //element组件   
    <el-pagination
                  :current-page="listQuery.page"
                  :page-sizes="[10,15,20,30, 50]"
                  :disabled="enumLoading"
                  :page-size="listQuery.limit"
                  :total="total"
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange" />
              </div>

    //变量
     total: null, //共多少行数据
   enumLoading: false,
    listQuery: {
        page: 1, //默认从第一页开始
        limit: 15, //默认每页15行
        filters: []  //存储需要过滤字段名称和值
      },
    //方法
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
复制代码

 

 

?
后端代码（C#、linq实现）：
复制代码
        [HttpGet]
        [Route("RegionName")]
        public ApiResult GetRegionName()
        {

            ApiResult result = new ApiResult();
            result.success = true;
            result.data = manage.GetRegionData().Select(d => new { id = d.RegionID, name = d.RegionName }).ToList();
            return result;
        }
复制代码

 

 where orderby  重载

　

 Filter、OP模型类

 pageMode模型类

复制代码
    public class PageModel
    {
        public int Page { get; set; }

        public int Rows { get; set; }

        public string Sort { get; set; }

        public string Order { get; set; }

        public string FilterRules { get; set; }
        public List<FilterRule> FilterRuleList
        {
            get
            {
                if (FilterRules == null) return null;
                return JsonConvert.DeserializeObject<List<FilterRule>>(FilterRules);
            }
        }

    }
View Code
复制代码

ApiResult 模型类

复制代码
    public class ApiResult
    {
        public bool success { get; set; }

        public string msg { get; set; }

        public object data { get; set; }
    }
View Code
复制代码

 

 

   以上代码是从实际项目截取出来的并不是完整的Demo，实际项目测试可行，如有问题请留言。

 核心是  从前端element table几个方法获取筛选条件 ， 服务器端where orderby 重载实现多条件筛选和排序。

 

posted @   hao_1234_1234  阅读(24510)  评论(2)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示