1. 实现效果如下：

2. 具体实现

1。 先将OrderEdit.vue页面中的表格布局弄出来，表格布局在面包屑导航下面，以及把对应的数据，图片渲染出来：

代码如下：

 <!-- 表格区域 -->
     <el-table border :data="goodsInfo" stripe>
       <el-table-column type="index" label="#">
        </el-table-column>
        <el-table-column prop="pics[0].pics_sma_url"
        label="商品图片">
        <template v-slot="scope">
          <el-image
          style="width: 150px; height: 150px"
          :src="scope.row.pics[0].pics_sma_url">
          </el-image>
      </template>
    </el-table-column>
    <el-table-column prop="goods_name" label="商品名称">
    </el-table-column>
    <el-table-column prop="goods_price" label="商品价格">
    </el-table-column>
    <el-table-column prop="add_time" label="添加时间">
      <template slot-scope="scope">
          {{scope.row.add_time | dataFormat}}
        </template>
    </el-table-column>
    <el-table-column prop="goods_weight" label="商品重量">
    </el-table-column>
  </el-table>

2。 在data节点下添加两个数组变量，为什么是两个呢？

解释：我们通过order_id可以得到一个goods数组，这个goods数组里面有goods_id，但是仅仅获取到goods数组是不够的，因为没有商品名称以及其他商品详细信息，我们还需要通过goods数组里面的goods_id去获得每一个商品的详细信息。

对于在for循环里面连续发axios请求，想做具体解释：

之后查阅资料，得知：因为里面是异步请求，而有可能for循环的每一遍循环会先于数据返回，导致拿不到完整数据或者顺序混乱。

于是需要.then来获取返回的结果，这样的话，for循环会等待结果返回再进入下一次循环

 // 获得订单信息以及根据获得的商品id得到商品信息汇总
    async getOrderInfoAndGoods () {
      const { data: res } = await this.$http.get('orders/' + this.id)
      this.orderForm = res.data
      // console.log(this.orderForm)
      this.goods = res.data.goods

      // 查询商品详细信息
      // 数组里面有几个元素就查询几次
      for (var i = 0; i < this.goods.length; i++) {
        await
        this.$http.get('goods/' + this.goods[i].goods_id)
          .then((res1) => {
            this.goodsInfo.push(res1.data.data)
            console.log(this.goodsInfo)
          })
      }
    },

3。 OrderEdit.vue中再去弄备注信息，但是关于备注信息要注意：因为数据库的表中，本身是没有“备注”这一字段的，（虽然我学了Node，但是学得实属比较菜，所以不敢去改动sql文件之后再去改后端代码）。

所以，我选择了把备注信息进行本地存储（localStorage），在mounted钩子中，也就是等页面所有dom元素渲染完成后我们可以把本地存储的值再重新付给 input 绑定的值

为input绑定 失去焦点事件：

<!-- 关于备注 -->
      <div class="tip">
        买家备注:
        <el-input type="text" placeholder="请输入买家备注"
          @blur="saveTip"
                  v-model="tip" clearable>
          </el-input>
      </div>

样式：

.tip {
    position: absolute;
    bottom: 50px;
    right:50px;
    width: 500px;
  }

再去methods下定义函数，以及定义mounted函数：

 mounted () {
    this.tip = localStorage.getItem('tip-' + this.id)
  }，

// 失去焦点时，将备注内容存到本地存储中
    saveTip () {
        localStorage.setItem('tip-' + this.id, this.tip)
    }

打开调试面板，可以看到如下：