效果如下：
实现如下：
1.我仍然保留了添加地址这一个对话框，但只是绑定在另一个按钮上面，而点击左侧第一个按钮就会跳转到“修改订单”模块
<template v-slot="scope"><el-tooltip effect="dark"content="修改订单" placement="top" :enterable="false"><el-button type="primary"icon="el-icon-edit" size="mini"@click="goEditPage(scope.row.order_id)"></el-button></el-tooltip><el-tooltip effect="dark"content="物流信息" placement="top" :enterable="false"><el-button type="success"icon="el-icon-location" size="mini"@click="showProgressBox"></el-button></el-tooltip><el-tooltip effect="dark"content="修改地址" placement="top" :enterable="false"><el-button type="primary" size="mini"icon="el-icon-edit" circle @click="addressVisible = true"></el-button></el-tooltip></template>
2.接着我们要定义goEditPage函数，这个函数的功能时跳转页面：
// 前往编辑订单页面goEditPage (id) {this.$router.push('/orders/edit/' + id)}
3.记得要在order文件夹下新建一个文件OrderEdit.vue，接下来去router/index.js里面修改路由配置，记得导入这个模块，(截图没截到)：
OrderEdit.vue完整代码如下：
<template><div><!-- 面包屑导航区域 --><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><!-- 表单区域 --><el-form :model="orderForm" label-width="80px"ref="orderFormRef"><el-form-item label="订单编号"><el-input v-model="orderForm.order_number" disabled></el-input></el-form-item><el-form-item label="是否发货"><p style="font-size:15px">1表示发货,0表示不发货</p><el-input v-model="orderForm.is_send"></el-input></el-form-item><el-form-item label="支付状态"><p style="font-size:15px">0表示 未支付, 1表示支付宝, 2表示微信, 3表示银行卡</p><el-input v-model="orderForm.order_pay"></el-input></el-form-item><el-form-item label="订单价格"><el-input v-model="orderForm.order_price"></el-input></el-form-item></el-form><el-button type="primary" @click="edit">修改订单</el-button></div></template><script>export default {data () {return {// 传递过来的商品idid: this.$route.params.id,// 修改订单的表单数据对象orderForm: {is_send: '',order_fapiao_title: '',order_number: '',order_pay: '',order_price: 0,pay_status: ''}}},created () {this.getOrderInfo()},methods: {// 获得订单信息async getOrderInfo () {const { data: res } = await this.$http.get('orders/' + this.id)this.orderForm = res.dataconsole.log(this.orderForm)},// 修改订单async edit () {const { data: res } = await this.$http.put('orders/' + this.id, this.orderForm)console.log(res)if (res.meta.status !== 201) {return this.$message.error('修改订单失败!')}this.$message.success('修改订单成功!')this.$router.push('/orders')}}}</script><style less="lang" scoped></style>
