1. 效果如下：

2. 实现代码

四个el-tab-pane中，< el-table >是一样的：

<el-tab-pane name="all" label="所有"><el-table :data="orderList" border stripe><el-table-column type="index" label="#"></el-table-column><el-table-column prop="order_number" label="订单编号"></el-table-column><el-table-column prop="order_price" label="订单价格"></el-table-column><el-table-column prop="order_pay" label="支付状态"><template v-slot="scope"><el-tag type="danger"v-if="scope.row.order_pay === '0'">未支付</el-tag><el-tag type="success"v-if="scope.row.order_pay === '1'">支付宝</el-tag><el-tag type="success"v-if="scope.row.order_pay === '2'">微信</el-tag><el-tag type="success"v-if="scope.row.order_pay === '3'">银行卡</el-tag></template></el-table-column><el-table-column prop="is_send" label="是否发货"><template v-slot="scope"><el-tag type="success"v-if="scope.row.is_send === '是'">是</el-tag><el-tag type="danger"v-if="scope.row.is_send === '否'">否</el-tag></template></el-table-column><el-table-column prop="create_time" label="下单时间"><template slot-scope="scope">{{scope.row.create_time | dataFormat}}</template></el-table-column><el-table-column prop="consignee_addr" label="发货地址"></el-table-column><el-table-column label="操作"><template v-slot="scope"><el-button type="text"@click="sendGoods(scope.row.order_id)"v-if="scope.row.is_send === '是'"disabled>发货</el-button><el-button type="text"@click="sendGoods(scope.row.order_id)"v-if="scope.row.is_send === '否'" >发货</el-button><el-button type="text"@click="dialogVisible(scope.row.order_id)">修改地址</el-button><el-button type="text"@click="goEditPage(scope.row.order_id)">订单详情</el-button><el-button type="text"@click="showProgressBox">物流信息</el-button></template></el-table-column></el-table></el-tab-pane>

// 包含所有订单的列表orderList: [],// 只包含已发货的订单的列表sendOrderList: [],// 只包含待发货的订单的列表noSendOrderList: [],// 只包含 未支付的订单的列表noPayOrderList: [],

// 获取订单列表async getOrderList () {// console.log(this.queryInfo.query)const { data: res } = await this.$http.get('orders', {params: this.queryInfo})console.log(res)if (res.meta.status !== 200) {this.$message.error('获取订单列表失败!')}this.total = res.data.totalthis.orderList = res.data.goodsconsole.log(this.orderList)// 过滤出只包含已发货的订单的列表this.sendOrderList =this.orderList.filter(item => item.is_send === '是')// 过滤出 只包含 未发货的订单的列表this.noSendOrderList =this.orderList.filter(item => item.is_send === '否')// 过滤出 只包含 未支付的订单的列表this.noPayOrderList =this.orderList.filter(item => item.order_pay === '0')},