1.默认排序很简单
在el-table标签中加入默认属性
:default-sort ="{prop:'date',order:'descending'}"
然后在单独一列中
<el-table-column
prop="date"
label="日期"
sortable
width="120”>
</el-table-column>
2.后台排序
需要根据需要给后台发送信息,让后台做一些操作
首先在el-table标签中加入事件监听
@sort-change='sortChange'
然后单独一列中设置:
<el-table-column
prop="name"
label="姓名"
sortable='custom'
width="120">
</el-table-column>
然后方法的实现:
methods: {
sortChange(column, prop, order) {
//点击排序按钮后拿到column.order,可以发送column.order给后台,后台再根据什么排序来返回排序过后的数据
console.log(column + '---' + column.prop + '---' + column.order)
//输出的结果 [object Object]---name---ascending
},
}
3.指定列值的格式化
<el-table-column
prop="address"
label="地址"
:formatter="formatter"
show-overflow-tooltip>
</el-table-column>
Methods{
formatter(row, column) {
return row.rowNum +'.'+ row.address;
},
}
我们可以看到展现方式里边统一都有[rowNum].[地址]
标签:vue,column,element,---,后台,排序,order,row From: https://www.cnblogs.com/andy0816/p/16963830.html