vue elementUI 实现el-table 表头筛选，表头排序功能

vue elementUI 实现el-table 表头筛选，表头排序功能

表头筛选、排序功能：

• 可以做前端筛选，排序，（存在问题，前端无法对所有数据进行筛选或者排序，只能对当页数据。 所以前端做这种处理只适用于数据量少，无分页情况或者前端一次拿到了所有数据自己分页的情况）

• 调用后端接口进行筛选，或者排序，好处是能对全部数据进行筛选或者排序

筛选功能

排序的表头筛选器代码 ：
绑定 :filter-method=“filterHandler” 代表筛选条件变化时

 <el-table-column
                prop="bigMethodDesc"
                show-overflow-tooltip
                label="评标办法"
                min-width=3
                :filters="selectData.big_method"
                :filter-method="filterHandler"
                class-name="lasttd"
                column-key="bigMethod"
            >
             <template slot="header">
                 <span >评标办法</span>
            </template>
</el-table-column>

1、前端对数据进行筛选的方法

// filterHandler方法
filterHandler(value, row, column) {   // 该方法会对每个row执行
    let property = column['property'];
    // console.log(property)          
           
    return row[property] === value;   // ** 此句返回前端筛选后的数据
   // value是filters里绑定的数据 里选中的项的value,  例如上面的selectData.big_method
},

2、调用后端接口对数据进行筛选

首先，el-table绑定这个方法

   @filter-change="tableFilterChange"

// filterHandler方法
filterHandler(value, row, column) {   // 该方法会对每个row执行
      let property = column['property'];
      // console.log(property)          
      
      return row   // 返回所有数据  注销前端筛选
},
tableFilterChange(filters){ // 表格筛选条件更改
     this.$refs.purchasePackage.bodyWrapper.scrollTop = 0;

     const keys=Object.keys(filters)
     const values=Object.values(filters)
     const key=keys[0]
     const value=values[0]
     this.chooseSelect[key]=value    // chooseSelect 存储所有勾选的数据，后端筛选接口时会用到

    this.getFilter_tableData() // 传筛选的参数  调用后端接口返回数据
},

排序功能

排序的表头列的代码

 <el-table-column prop="businessWeight" label="商务权重" min-width=2.5 >
             <template slot="header" >
                    <div  class="rigbox">
                      商务权重
                    <el-dropdown @command="handleCommand" class="rig_icon">
                        <!-- <span class="sortable">⇃↾</span> -->
                        <span class="sortable businessWeight">
                            <span class="des">⇃</span>
                            <span class="asc">↾</span>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="businessWeight ascending">升序&nbsp;↾</el-dropdown-item>
                        <el-dropdown-item command="businessWeight descending">降序&nbsp;⇃</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    </div>
                </template>
             
            </el-table-column>

1、前端排序

// handleCommand
handleCommand(command){ // 前端表格排序
    let arr = command.split(' ');
    this.$refs['purchasePackage'].sort(arr[0],arr[1]); // 前端排序

    const lightSort=arr[1].slice(0,3)
    $('.asc').removeClass("lightSort")
    $('.des').removeClass("lightSort")
    $(`.${arr[0]}`).find(`.${lightSort}`).addClass("lightSort") // 高亮排序图标  该逻辑非必须

    this.chooseSelect.orders.arr[0] = arr[1]  // 存储排序的参数   后端排序时会用到参数 this.chooseSelect
},

2、调用后端接口排序

 tableSortChange(column ){ // 表格排序更改
     this.$refs.purchasePackage.bodyWrapper.scrollTop = 0;
     this.$refs.purchasePackage.clearSort()   // 注销前端的排序
     // 这句很重要，把表格自己的排序清除掉

     this.getFilter_tableData() // 传排序的参数  调用后端接口返回数据    
},

	总结：如果是前端排序或者筛选，只需要用到column上的两个方法 
	:filter-method="filterHandler" 或者 @command="handleCommand";

如果需要调用后端接口，则需要用到给table绑定的两个方法
@filter-change=“tableFilterChange” 或者@sort-change=“tableSortChange”
另外需要清除前端筛选或者排序的效果

作者：爱学习的小仙女早睡早起
链接：https://www.jianshu.com/p/3598359b71c6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。