在現(xiàn)代web開發(fā)中，使用表格是非常常見的一種方式，而且在許多場合中表格通常是展示數(shù)據(jù)的最好的方式。隨著前端框架技術(shù)的不斷發(fā)展，開發(fā)者們可以使用越來越多的前端框架組件來輕松地展示數(shù)據(jù)。在Vue中，表格組件是非常常用的一個(gè)組件，而表格排序是其中非?；A(chǔ)卻也非常重要的一個(gè)功能。

Vue的表格排序組件是基于vue-tables-2提供的，支持前后端分離的一款表格插件。開發(fā)者可以通過參數(shù)設(shè)置來控制表格組件的排序方式和顯示的數(shù)據(jù)。表格排序組件可以根據(jù)表格的數(shù)據(jù)設(shè)置為升序或降序，而且支持多列同時(shí)排序。此外，還可以定制化控制每一列的顯示樣式和內(nèi)容。

// 安裝vue-tables-2組件
npm install vue-tables-2 --save
// 初始化Vue的表格排序組件
import { VueTables } from 'vue-tables-2';
Vue.use(VueTables.client);

有了Vue的表格排序組件，開發(fā)者可以使用它處理表格組件的排序功能。thead中的單元格設(shè)置class為“sorting”，并提供綁定的排序?qū)傩浴．?dāng)單元格被點(diǎn)擊后，Vue會(huì)自動(dòng)觸發(fā)“vue-tables.sort”事件并傳遞包含排序?qū)傩栽趦?nèi)的所有信息。具有sorting class的單元格綁定的屬性會(huì)通過“desc"或"asc"屬性的值來設(shè)置相應(yīng)的排列順序。

// 設(shè)置表頭中的單元格TitleDescription// Vue 實(shí)例方法 sort
sort(column) {
this.$emit('vue-tables.sort', column);
}
// 根據(jù)列名設(shè)置sorting class
sortThead(column) {
if (this.column == column) {
return `sorting_${this.direction}`;
}
return '';
}

上述代碼中，我們首先在th元素中設(shè)置了class屬性。sortThead函數(shù)是用來設(shè)置sorting class的，其中判斷當(dāng)前列是否和用戶當(dāng)前使用的列完全一致。如果是，則返回為該列添加 sorting_{asc/desc} 的字符串。這樣在用戶點(diǎn)擊表格頭部的時(shí)候，就可以通過上面的代碼就可以實(shí)現(xiàn)排序了。

在實(shí)現(xiàn)Vue的表格排序之后，還可以使用Vue提供的許多其他的功能，如實(shí)現(xiàn)角色分發(fā)、組件和路由控制等?？傊?，Vue的表格排序是非常好用的，可以方便地實(shí)現(xiàn)表格的排序和分頁功能。