vue+element列表排序
阿新 • • 發佈:2022-12-07
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].[地址]