后台管理系统【订单列表】

前端念初

已于 2022-10-09 21:21:20 修改

阅读量1.4k

点赞数

文章标签： vue.js elementui javascript

于 2022-10-09 21:21:18 首次发布

本文链接：https://blog.csdn.net/weixin_62765236/article/details/127234374

版权

本文详细介绍了如何使用Vue.js和ElementUI构建后台管理系统的订单列表页面，包括数据加载、表格展示、筛选排序等功能，展示了JavaScript在前端开发中的应用。

摘要由CSDN通过智能技术生成

<template>
  <div>
         <!-- A面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item>订单列表</el-breadcrumb-item>
		</el-breadcrumb>
    <!-- B卡片视图区域 -->
    <el-card>
        <el-row :gutter="20">
				<el-col :span="8">
					<el-input
				    placeholder="请输入内容"
                    v-model="queryInfo.query"
                    clearable
                    @clear="getOrderList"
			 			>
							<el-button @click="getOrderList" slot="append" icon="el-icon- 
                            search">
                            </el-button>
					</el-input>
                </el-col>
        </el-row>
        <!-- 订单列表数据 -->
        <el-table :data="orderlist">
           <el-table-column type="index" label="#"></el-table-column>
           <el-table-column label="订单编号" prop="order_number"></el-table-column>
           <el-table-column label="订单价格" prop="order_price"></el-table-column&g