15. 开发在线点餐功能（二）

<el-dialog v-model="data.dialogShow" title="已点餐品" width="800">
  <el-table :data="data.orderList">
    <el-table-column label="餐品图片">
      <template #default="scope">
        <el-image style="width: 50px; height: 50px" :src="scope.row.img" :preview-src-list="[scope.row.img]" preview-teleported></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="餐品名称" />
    <el-table-column prop="price" label="餐品价格" />
    <el-table-column prop="num" label="餐品数量" />
  </el-table>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="data.dialogShow = false">关闭</el-button>
      <el-button type="primary" @click="save">下单</el-button>
    </div>
  </template>
</el-dialog>

// 点餐的逻辑
const addOrder = (foods) => {
  let f = data.orderList.find(item => item.id === foods.id)  // 找到菜单里面跟当前点餐同样的餐品
  if (f) {  //  存在通用的餐品的情况  就更新餐品的数量
    f.num += foods.num
  } else {  // 不存在  就新增进去
    let foods1 = JSON.parse(JSON.stringify(foods))
    data.orderList.push(foods1)
  }
  // 表示对 num字段进行累计求和
  data.total = data.orderList.map(item => item.num).reduce((acc, cur) => acc + cur, 0)
}

<el-button type="primary" plain @click="showOrderList">已点餐品({{ data.total }})</el-button>

const showOrderList = () => {
  data.dialogShow = true
}