element Table 表格给列添加排序符号，并把排序规则传给后台

小咪咪 2022-03-22 15:47 579阅读 0赞

**先看写法：**蓝色部分

<el-table
            @sort-change="getSortChange"
            :default-sort = "{prop: 'start_time', order: 'desc'}"
        >
          <el-table-column prop="start_time" label="开始时间" sortable="custom">
                <template slot-scope="scope">
                    <span>{
       {scope.row.startTime}}</span>
                </template>
          </el-table-column>
          <el-table-column prop="end_time" label="结束时间"  sortable="custom">
                <template slot-scope="scope">
                    <span>{
       {scope.row.endTime}}</span>
                </template>
          </el-table-column>
        </el-table>
        <script>
            data() {
                return {
                    formInline:[],
                    order:{}
                }
            },
            methods: {
                //getSortChange方法表示每次点击排序按钮触发该事件，参数column表示每次点击的排序条件及规则
                getSortChange(column){
                    this.order = {
                        sidx: column.prop,
                        sord: column.order,
                    }
                    this.formInline.push(this.order);
                    var arr = [];
                    if(this.formInline.length >= 2){
                        //直接定义结果数组  
                        arr.push(this.formInline[0]);  
                        for(var i = 1; i < this.formInline.length; i++){    //从数组第二项开始循环遍历此数组  
                            if(this.formInline.indexOf(this.formInline[i]) == -1){  
                                arr.push(this.formInline[i]);  
                            }  
                        }
                    }else{
                        arr = this.formInline;
                    }     
                    this.getTableData(arr);
                },
              getTableData(arr) {
                    this.$http.post("/getData",arr).then((res) => {
                       
                    }).catch((error) => {
                        console.log(error)
                    })
                },
            }    
        </script>

分析：

>     在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。  
>     可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。  
>     可以使用sort-method或者sort-by使用自定义的排序规则。  
>     如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，  
>     在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

本例子是同时传多个排序条件到后台

getSortChange方法表示每次点击排序按钮触发该事件，参数column表示每次点击的排序条件及规则