07-vue_shop后台管理系统—订单管理

最新推荐文章于 2024-06-15 08:54:08 发布

Minnor

最新推荐文章于 2024-06-15 08:54:08 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/holive_9/article/details/125817950

版权

绘制页面

BreadCrumb 面包屑导航区域
Card 卡片区域
- 输入框和搜索
- 订单列表
  - 修改订单地址
  - 删除
- Pagination 分页

输入框和搜索

// 同一行 -->
// gutter 栅格间隔 -->
<el-row :gutter="20">
  // 第一列 -->
  // 3. 输入框和搜索 -->
  // span 栅格占据的列数 -->
  <el-col :span="8">
    <el-input
      placeholder="请输入内容"
      v-model="queryInfo.query"
      clearable
      @clear="getOrdersList"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="getOrdersList"
      ></el-button>
    </el-input>
	</el-col>
</el-row>

订单列表

首先要获取订单列表数据，获取成功后将数据保存到 ordersList数组中， Table 组件中需要绑定数据源 :data = ordersList

// 4. 订单列表区域 -->
<el-table :data="ordersList" style="width: 100%" border stripe>
  <el-table-column type="index"></el-table-column>
	<el-table-column prop="order_number" label="订单编号">
  </el-table-column>
	<el-table-column prop="order_price" label="订单价格" width="90">
  </el-table-column>
  <el-table-column prop="pay_status" label="是否付款"></el-table-column>
  <el-table-column prop="is_send" label="是否发货" width="90"></el-table-column>
  <el-table-column prop="create_time" label="下单时间"></el-table-column>
  <el-table-column label="操作" width="210">
    <template slot-scope="scope">
      // 5.修改按钮 -->
      <el-button type="primary" icon="el-icon-edit" size="medium"
      >修改</el-button>
        // 6.删除按钮 -->
      <el-button
        type="success"
        icon="el-icon-location"
        size="medium"
        @click="removeById(sc