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

先看写法:蓝色部分

    <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表示每次点击的排序条件及规则

猜你喜欢

转载自blog.csdn.net/weixin_40841731/article/details/86685684