element Table 表格给列添加排序符号, 并把排序规则传给后台
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
先看写法:蓝色部分
<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
项目地址:https://gitcode.com/gh_mirrors/eleme/element
在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。
可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。
可以使用sort-method或者sort-by使用自定义的排序规则。
如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,
在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。
本例子是同时传多个排序条件到后台
getSortChange方法表示每次点击排序按钮触发该事件,参数column表示每次点击的排序条件及规则
阅读全文
AI总结




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 个月前
更多推荐
相关推荐
查看更多
element

A Vue.js 2.0 UI Toolkit for Web
element

element

所有评论(0)