嵌套导致的VUE渲染问题

resources/views/transport/waybill/index.blade.php

@@ -51,66 +51,77 @@
                     :id="'waybill'+waybill.id" @click="selectedColor(waybill.id)" @mouseover="hidetop($event)" @mouseleave="showtop($event)">
                     <td><input class="checkItem" type="checkbox" :value="waybill.id"></td>
                     <td>
-                        <span v-if=waybill.status=="未审核"||waybill.status=="待重审">
+                        <span>
+                            <span v-if=waybill.status=="未审核"||waybill.status=="待重审">
                             @can('运输管理-运单-运单审核')
-                                <button class="btn btn-outline-primary btn-sm" @click="waybillAudit(waybill.id,waybill.waybill_number)">审核</button>
-                            @endcan
-                            @can('运输管理-编辑')
-                                <a target="_blank" class="btn btn-outline-secondary btn-sm" :href= "('{{url('transport/waybill/waybillEdit')}}/'+waybill.id)">修改</a>
-                            @endcan
-                        </span>
-                        <span v-if=waybill.status=="已审核">
-                            @can('运输管理-运单-调度')
-                                <button class="btn btn-outline-secondary btn-sm" @click="waybillRetreatAudit(waybill)">取消审核</button>
-                                <a target="_blank" class="btn btn-outline-secondary btn-sm" :href= "('{{url('transport/waybill')}}/'+waybill.id+'/edit')">调度</a>
-                            @endcan
-                        </span>
-                        <span v-if=waybill.status==="待终审">
-                            @can('运输管理-运单-调度审核')
-                                <button class="btn btn-outline-success btn-sm" @click="waybillEndAudit(waybill.id,waybill.waybill_number)">完结</button>
-                            @endcan
-                            @can('运输管理-运单-调度')
-                                <a target="_blank" class="btn btn-outline-secondary btn-sm" :href= "('{{url('transport/waybill')}}/'+waybill.id+'/edit')">改调度</a>
-                            @endcan
+                                    <button class="btn btn-outline-primary btn-sm" @click="waybillAudit(waybill.id,waybill.waybill_number)">审核</button>
+                                @endcan
+                                @can('运输管理-编辑')
+                                    <a target="_blank" class="btn btn-outline-secondary btn-sm" :href= "('{{url('transport/waybill/waybillEdit')}}/'+waybill.id)">修改</a>
+                                @endcan
+                            </span>
+                            <span v-if=waybill.status=="已审核">
+                                @can('运输管理-运单-调度')
+                                    <button class="btn btn-outline-secondary btn-sm" @click="waybillRetreatAudit(waybill)">取消审核</button>
+                                    <a target="_blank" class="btn btn-outline-secondary btn-sm" :href= "('{{url('transport/waybill')}}/'+waybill.id+'/edit')">调度</a>
+                                @endcan
+                            </span>
+                            <span v-if=waybill.status==="待终审">
+                                @can('运输管理-运单-调度审核')
+                                    <button class="btn btn-outline-success btn-sm" @click="waybillEndAudit(waybill.id,waybill.waybill_number)">完结</button>
+                                @endcan
+                                @can('运输管理-运单-调度')
+                                    <a target="_blank" class="btn btn-outline-secondary btn-sm" :href= "('{{url('transport/waybill')}}/'+waybill.id+'/edit')">改调度</a>
+                                @endcan
+                            </span>
                         </span>
                     </td>
                     @can('运输管理-运单-置顶')
                         <td class="td-warm text-muted" style="height: 55px">
-                            <button type="button" class="btn btn-sm btn-outline-danger" v-if="waybill.remark" @click="cancelOnTop($event)" :data_id="waybill.id"  style="opacity: 0.75">取消</button>
-                            <button type="button" class="btn btn-sm btn-outline-secondary" v-else @click="waybillOnTop($event)" :data_id="waybill.id"  style="opacity: 0.75">置顶</button>
+                            <span>
+                                <button type="button" class="btn btn-sm btn-outline-danger" v-if="waybill.remark" @click="cancelOnTop($event)" :data_id="waybill.id"  style="opacity: 0.75">取消</button>
+                                <button type="button" class="btn btn-sm btn-outline-secondary" v-else @click="waybillOnTop($event)" :data_id="waybill.id"  style="opacity: 0.75">置顶</button>
+                            </span>
                         </td>
                     @endcan
                     <td :class="[waybill.status=='已审核'?'text-success':'']"><span>@{{waybill.status}}</span></td>
                     <td class="td-warm text-muted toptd">
-                        <div v-if="waybill.remark" class="bg-light-yellow  text-danger top"  data-toggle="tooltip" style="opacity: 0.1;position: absolute;z-index: 1"
-                        >置顶备注：@{{  waybill.remark }}</div>
-                        @{{ i+1 }}</td>
+                        <div>
+                            <div v-if="waybill.remark" class="bg-light-yellow  text-danger top"  data-toggle="tooltip" style="opacity: 0.1;position: absolute;z-index: 1"
+                            >置顶备注：@{{  waybill.remark }}</div>
+                        @{{ i+1 }}
+                        </div>
+                    </td>
                     <td class="td-warm text-muted"><span>@{{waybill.created_at}}</span></td>
                     <td class="td-warm text-muted">
-                        <a href="#" v-if="waybill.waybillAuditLogs.length>0" class="dropdown-toggle"  data-toggle="dropdown">
-                            @{{ waybill.waybillAuditLogs[0].user ? waybill.waybillAuditLogs[0].user.name : '系统' }}<b class="caret"></b>
-                        </a>
-                        <div style="position: absolute;width:320px;margin-left:-100px;background-color: white;max-height:150px ;overflow-y:auto" class="small mt-0 dropdown-menu">
-                            <table class="table table-sm table-striped table-bordered">
-                                <tr>
-                                    <th>经手人</th>
-                                    <th>操作</th>
-                                    <th>时间</th>
-                                </tr>
-                                <tr v-for="people in waybill.waybillAuditLogs">
-                                    <td>@{{ people.user ? people.user.name : '系统' }}</td>
-                                    <td class="text-danger font-weight-bold">@{{ people.audit_stage }}</td>
-                                    <td>@{{ people.created_at }}</td>
-                                </tr>
-                            </table>
+                        <div>
+                            <a href="#" v-if="waybill.waybillAuditLogs.length>0" class="dropdown-toggle"  data-toggle="dropdown">
+                                @{{ waybill.waybillAuditLogs[0].user ? waybill.waybillAuditLogs[0].user.name : '系统' }}<b class="caret"></b>
+                            </a>
+                            <div style="position: absolute;width:320px;margin-left:-100px;background-color: white;max-height:150px ;overflow-y:auto" class="small mt-0 dropdown-menu">
+                                <table class="table table-sm table-striped table-bordered">
+                                    <tr>
+                                        <th>经手人</th>
+                                        <th>操作</th>
+                                        <th>时间</th>
+                                    </tr>
+                                    <tr v-for="people in waybill.waybillAuditLogs">
+                                        <td>@{{ people.user ? people.user.name : '系统' }}</td>
+                                        <td class="text-danger font-weight-bold">@{{ people.audit_stage }}</td>
+                                        <td>@{{ people.created_at }}</td>
+                                    </tr>
+                                </table>
+                            </div>
                         </div>
                     </td>
                     <td class="td-warm"><span>@{{waybill.type}}</span> <span class="badge badge-sm bg-warning" v-if="(waybill.collect_fee && waybill.collect_fee>0) || waybill.is_to_pay=='1'">到付</span></td>
                     <td class="td-warm"><span>@{{waybill.owner}}</span></td>
                     <td class="td-warm toptd" :title="waybill.remark? '置顶备注：'+waybill.remark :''"><span>@{{waybill.source_bill}}</span></td>
                     <td class="td-warm">
-                        <span class="badge badge-pill badge-danger" v-if="waybill.is_cancel">取消</span>
-                        <span>@{{waybill.wms_bill_number}}</span>
+                        <span>
+                            <span class="badge badge-pill badge-danger" v-if="waybill.is_cancel">取消</span>
+                            <span>@{{waybill.wms_bill_number}}</span>
+                        </span>
                     </td>
                     <td class="td-warm"><span>@{{ waybill.order_status }}</span></td>
                     <td class="td-warm"><span>@{{waybill.end_date}}</span></td>
@@ -158,14 +169,16 @@
                     <td class="td-cool"><span v-if="waybill.warehouse_weight">@{{waybill.warehouse_weight|filterZero}}  @{{waybill.warehouse_weight_unit}}</span></td>
                     <td class="td-cool"><span v-if="waybill.carrier_weight">@{{waybill.carrier_weight|filterZero}}  @{{waybill.carrier_weight_unit}}</span></td>
                     <td class="td-cool text-center" style="position: relative" @mouseenter="btnRefreshWeightZoomOut(waybill)" @mouseleave="btnRefreshWeightZoomIn(waybill)">
-                        <span v-if="waybill.warehouse_weight_other&&waybill.btn_refresh_weight=='zoomIn'"> @{{waybill.warehouse_weight_other}}  @{{waybill.warehouse_weight_unit_other}}</span>
-                        <button type="button" class="btn btn-sm btn-outline-info" @click="refreshWaveHouseWeight(waybill.wms_bill_number)"
-                                :style="[
+                        <span>
+                            <span v-if="waybill.warehouse_weight_other&&waybill.btn_refresh_weight=='zoomIn'"> @{{waybill.warehouse_weight_other}}  @{{waybill.warehouse_weight_unit_other}}</span>
+                            <button type="button" class="btn btn-sm btn-outline-info" @click="refreshWaveHouseWeight(waybill.wms_bill_number)"
+                                    :style="[
                                 {position:waybill.btn_refresh_weight&&waybill.btn_refresh_weight=='zoomIn'?'absolute':'static'},
                                 {transform:waybill.btn_refresh_weight&&waybill.btn_refresh_weight=='zoomIn'?'scale(0.55)':'scale(1)'},
                                 {right:waybill.btn_refresh_weight&&waybill.btn_refresh_weight=='zoomIn'?'-10px':'auto'},
                                 {bottom:waybill.btn_refresh_weight&&waybill.btn_refresh_weight=='zoomIn'?'-6px':'auto'},
                                 ]">刷新</button>
+                        </span>
                     </td>
                     <td class="td-cool"><span v-if="waybill.carrier_weight_other">@{{waybill.carrier_weight_other|filterZero}}  @{{waybill.carrier_weight_unit_other}}</span></td>
                     <td class="td-cool"><span v-if="waybill.amount">@{{waybill.amount}} @{{waybill.amount_unit_name }}</span></td>