前端学习之vue+element-ui电商项目（九）订单管理

最新推荐文章于 2023-09-14 17:52:24 发布

原创

最新推荐文章于 2023-09-14 17:52:24 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #vue

本文介绍了如何使用Vue.js和Element-UI组件库创建一个电商订单管理系统，涵盖了从准备工作到界面样式、数据添加、方法实现等步骤，包括订单数据列表、分页、地址修改和物流进度展示等功能。

文章目录

0. 准备工作
1.界面样式
- 1.1 界面布局
- 1.2 导航区
2.订单数据列表
3.分页区
4.修改地址的对话框
5.展示物流进度的对话框
- 5.1 界面样式
- 5.2 数据添加
6.搜索与添加
7.搜索与添加

0. 准备工作

component下新建文件夹order下新建文件Order.vue，并在路由中引入文件
因为数据库中少了些文件，所以要自己导入。
1 ）citydata.js
2 ) db.js
3 ) wuliudb.json

PS：这些文件太长，我就不放了。

1.界面样式

1.1 界面布局

在这里插入图片描述

1.2 导航区

<el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

2.订单数据列表

2.1 界面样式

<el-row>
        <el-col :span="8">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 订单数据列表 -->
      <el-table :data="orderList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="订单编号" prop="order_number"></el-table-column>
        <el-table-column label="订单价格" prop="order_price"></el-table-column>
        <el-table-column label="是否付款" prop="pay_status"