你可以在Vue
中为
向上箭头和
向下箭头分别绑定不同的排序函数。例如，你可以为
向上箭头绑定一个ascendingSort函数，为
向下箭头绑定一个descendingSort函数。这两个函数可以通过axios调用mybatis的接口来实现升降排序。
以下是一个简单的示例代码：
```
html
<template>
<div>
<table>
<thead>
<tr>
<th @click="ascendingSort('columnName')">
向上箭头</th>
<th @click="descendingSort('columnName')">
向下箭头</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in sortedList" :key="index">
<td>{{ item.columnName }}</td>
<td>{{ item.otherColumnName }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
list: [],
sortType: 'asc', // 排序类型，默认为升序
sortColumn: 'columnName', // 排序的列名，默认为columnName
};
},
mounted() {
this.getData();
},
methods: {
// 获取数据
getData() {
axios.get('/api/getData').then(res => {
this.list = res.data;
});
},
// 升序排序
ascendingSort(columnName) {
this.sortType = 'asc';
this.sortColumn = columnName;
this.sortList();
},
// 降序排序
descendingSort(columnName) {
this.sortType = 'desc';
this.sortColumn = columnName;
this.sortList();
},
// 排序
sortList() {
axios
.post('/api/sortData', {
sortColumn: this.sortColumn,
sortType: this.sortType,
})
.then(res => {
this.list = res.data;
});
},
},
computed: {
sortedList() {
return this.list.sort((a, b) => {
// 根据sortColumn进行排序
if (a[this.sortColumn] < b[this.sortColumn]) {
return this.sortType === 'asc' ? -1 : 1;
} else if (a[this.sortColumn] > b[this.sortColumn]) {
return this.sortType === 'asc' ? 1 : -1;
} else {
// 如果sortColumn相等，则根据其他列进行排序
if (a.otherColumnName < b.otherColumnName) {
return -1;
} else if (a.otherColumnName > b.otherColumnName) {
return 1;
} else {
return 0;
}
}
});
},
},
};
</script>
```
在这个示例
中，我们为表头的
向上箭头和
向下箭头分别绑定了ascendingSort和descendingSort函数。这两个函数会设置sortType和sortColumn的值，并调用sortList函数进行排序。sortList函数会通过axios调用mybatis的接口，将sortColumn和sortType作为参数传递给后端进行排序。最后，我们通过computed属性sortedList来获取排序后的数据，并在表格
中进行展示。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
