baoshi-was/resources/views/transport/discharge/statement/_table.blade.php

<table class="table table-sm table-striped table-bordered table-hover card-body p-0 m-0">
    <tr class="text-center">
        <th class="" colspan="1"></th>
        <th class="td-helpful" colspan="4">作业信息</th>
        <th class="td-cool" colspan="4">收入信息</th>
        <th class="" colspan="5">支出信息</th>
        <th class="td-yellow" colspan="3">其他信息</th>
    </tr>
    <tr class="text-center" >
        <th><input type="checkbox" class="form-check" name="selectAll" id="selectAll" @click="checkAll"/></th>
        <th class="td-helpful">序号</th>
        <th class="td-helpful">日期</th>
        <th class="td-helpful">作业名称</th>
        <th class="td-helpful">入库单号</th>
        <th class="td-cool">数量</th>
        <th class="td-cool">单位</th>
        <th class="td-cool">收入单价</th>
        <th class="td-cool">收入合计</th>
        <th>服务商</th>
        <th>数量</th>
        <th>单位</th>
        <th>支出单价</th>
        <th>支出合计</th>
        <th class="td-yellow">状态</th>
        <th class="td-yellow">收入备注</th>
        <th class="td-yellow">支出备注</th>
    </tr>
    <template v-if="dischargeStatements.length > 0">
        <tr v-for="(dischargeTask,index) in dischargeStatements" class="text-center"  @click="selectTr===index+1?selectTr=0:selectTr=index+1" :class="selectTr===index+1?'focusing' : ''">
            <td ><input type="checkbox" class="form-check" :value="dischargeTask.id" v-model="checkData"></td>
            <td class="td-helpful">@{{ index+1 }}</td>
            <td class="td-helpful">@{{ dischargeTask.created_at }}</td>
            <td class="td-helpful">@{{ dischargeTask.type }}</td>
            <td class="td-helpful">@{{ dischargeTask.numbers }}</td>
            <td class="td-cool">@{{ dischargeTask.income_amount }}</td>
            <td class="td-cool">@{{ dischargeTask.income_unit }}</td>
            <td class="td-cool">@{{ dischargeTask.income_unit_price }}</td>
            <td class="td-cool">@{{ dischargeTask.income_total_cost }}</td>

            <td>@{{ dischargeTask.facilitator ? dischargeTask.facilitator.name : ''  }}</td>
            <td>@{{ dischargeTask.expenditure_amount }}</td>
            <td>@{{ dischargeTask.expenditure_unit }}</td>
            <td>@{{ dischargeTask.expenditure_unit_price }}</td>
            <td class="">@{{ dischargeTask.expenditure_total_cost }}</td>
            <td class="td-yellow">@{{ dischargeTask.status }}</td>
            <td class="td-yellow">@{{ dischargeTask.income_remark }}</td>
            <td class="td-yellow">@{{ dischargeTask.expenditure_remark }}</td>
        </tr>
    </template>

    <template v-else>
        <tr>
           <td colspan="17">
               <div class='alert alert-info text-lg-center'>结算报表数据为空</div>
           </td>
        </tr>
    </template>
</table>
<hr>