美文网首页
vue elementUI 实现el-table 表头筛选,表头

vue elementUI 实现el-table 表头筛选,表头

作者: 爱学习的小仙女早睡早起 | 来源:发表于2021-08-30 14:30 被阅读0次

    表头筛选、排序功能:

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

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



    筛选功能

    排序的表头筛选器代码 :
    绑定 :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",另外需要清除前端筛选或者排序的效果

    相关文章

      网友评论

          本文标题:vue elementUI 实现el-table 表头筛选,表头

          本文链接:https://www.haomeiwen.com/subject/ttxoiltx.html