要解决vue-js分页axios回调后jquery可排序的每个函数,可以按照以下步骤进行:
下面是一个示例代码:
<template>
<div>
<table>
<thead>
<tr>
<th @click="sortData('id')">ID</th>
<th @click="sortData('name')">Name</th>
<th @click="sortData('age')">Age</th>
</tr>
</thead>
<tbody>
<tr v-for="item in sortedData" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
import $ from 'jquery';
export default {
data() {
return {
data: [],
sortKey: '',
sortOrder: 'asc',
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('/api/data')
.then(response => {
this.data = response.data;
})
.catch(error => {
console.error(error);
});
},
sortData(key) {
if (this.sortKey === key) {
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
this.sortKey = key;
this.sortOrder = 'asc';
}
this.data.sort((a, b) => {
if (this.sortOrder === 'asc') {
return a[key] - b[key];
} else {
return b[key] - a[key];
}
});
},
},
computed: {
sortedData() {
return this.data;
},
},
};
</script>
在上述示例中,通过点击表头的列,可以实现对数据的排序。点击时,会调用sortData方法进行排序,并更新data属性中的数据。sortedData计算属性用于返回排序后的数据,以便在模板中使用。
请注意,这只是一个简单的示例,实际项目中可能需要根据具体需求进行适当的修改和扩展。
推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)和腾讯云对象存储(https://cloud.tencent.com/product/cos)。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云