在列中設置sortable
屬性便可實現以該列爲基準的排序,接受一個Boolean
,默認爲false
。能夠經過 Table 的default-sort
屬性設置默認的排序列和排序順序。後端
使用sort-method
或者sort-by
使用自定義的排序規則。code
若是須要後端排序,需將sortable
設置爲custom
,同時在 Table 上監聽sort-change
事件,在事件回調中能夠獲取當前排序的字段名和排序順序,從而向接口請求排序後的表格數據。orm
在本例中,還使用了formatter
屬性,用於格式化指定列的值,接受一個Function
,會傳入兩個參數:row
和column
,能夠根據本身的需求進行處理。排序
<template> <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" > <el-table-column prop="date" label="日期" sortable width="180"> </el-table-column> <el-table-column prop="name" label="姓名" sortable width="180"> </el-table-column> <el-table-column prop="address" label="地址" :formatter="formatter"> </el-table-column> </el-table> </template>
<script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄' }] } }, methods: { formatter(row, column) { return row.address; } } } </script>