vue实现订单列表
Vue 实现订单列表功能
1. 创建订单列表组件
新建一个 Vue 组件文件 OrderList.vue，用于展示订单列表。组件包含模板、脚本和样式三部分。
<template>
<div class="order-list">
<h3>订单列表</h3>
<table>
<thead>
<tr>
<th>订单编号</th>
<th>商品名称</th>
<th>数量</th>
<th>金额</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr v-for="order in orders" :key="order.id">
<td>{{ order.id }}</td>
<td>{{ order.name }}</td>
<td>{{ order.quantity }}</td>
<td>{{ order.price }}</td>
<td>{{ order.status }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
orders: [
{ id: 1, name: '商品A', quantity: 2, price: 100, status: '已支付' },
{ id: 2, name: '商品B', quantity: 1, price: 200, status: '待发货' },
{ id: 3, name: '商品C', quantity: 3, price: 150, status: '已完成' }
]
}
}
}
</script>
<style scoped>
.order-list {
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>2. 从后端获取订单数据
实际项目中，订单数据通常从后端 API 获取。使用 axios 发送 HTTP 请求获取数据。
<script>
import axios from 'axios';
export default {
data() {
return {
orders: []
}
},
created() {
this.fetchOrders();
},
methods: {
fetchOrders() {
axios.get('/api/orders')
.then(response => {
this.orders = response.data;
})
.catch(error => {
console.error('获取订单失败:', error);
});
}
}
}
</script>3. 添加分页功能 对于大量订单数据，实现分页功能提升用户体验。
<template>
<div class="order-list">
<!-- 表格部分同上 -->
<div class="pagination">
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>第 {{ currentPage }} 页</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
orders: [],
currentPage: 1,
pageSize: 10,
totalOrders: 0
}
},
computed: {
totalPages() {
return Math.ceil(this.totalOrders / this.pageSize);
}
},
methods: {
fetchOrders() {
axios.get('/api/orders', {
params: {
page: this.currentPage,
size: this.pageSize
}
})
.then(response => {
this.orders = response.data.orders;
this.totalOrders = response.data.total;
});
},
prevPage() {
this.currentPage--;
this.fetchOrders();
},
nextPage() {
this.currentPage++;
this.fetchOrders();
}
}
}
</script>4. 实现订单筛选和排序 添加筛选和排序功能，方便用户查找特定订单。
<template>
<div class="order-list">
<div class="filters">
<select v-model="filterStatus">
<option value="">所有状态</option>
<option value="paid">已支付</option>
<option value="shipped">已发货</option>
<option value="completed">已完成</option>
</select>
<select v-model="sortField">
<option value="id">按订单号</option>
<option value="price">按金额</option>
</select>
</div>
<!-- 表格和分页部分 -->
</div>
</template>
<script>
export default {
data() {
return {
filterStatus: '',
sortField: 'id'
}
},
methods: {
fetchOrders() {
axios.get('/api/orders', {
params: {
page: this.currentPage,
size: this.pageSize,
status: this.filterStatus,
sort: this.sortField
}
})
.then(response => {
this.orders = response.data.orders;
});
}
},
watch: {
filterStatus() {
this.currentPage = 1;
this.fetchOrders();
},
sortField() {
this.fetchOrders();
}
}
}
</script>5. 添加订单详情查看功能 为每个订单添加详情查看功能，使用 Vue Router 实现页面跳转。
<template>
<tr v-for="order in orders" :key="order.id">
<!-- 其他单元格 -->
<td>
<router-link :to="`/orders/${order.id}`">查看详情</router-link>
</td>
</tr>
</template>在 router.js 中配置订单详情路由：
const routes = [
{
path: '/orders/:id',
component: () => import('./views/OrderDetail.vue')
}
];以上实现涵盖了订单列表的基本功能，包括数据展示、分页、筛选排序和详情查看。根据实际项目需求，可以进一步扩展功能，如订单状态修改、批量操作等。
