先看写法:蓝色部分

    <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>

 

分析:

element
A Vue.js 2.0 UI Toolkit for Web

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

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

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

阅读全文
AI总结
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:7 个月前 )
c345bb45 11 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 11 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐