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