当您单击TR元素时,嵌套表位于该嵌套表的下面,我已请求嵌套表中的api。 当我单击另一个tr时,来自tr的数据进入上一个,并使数据相同 这是我的表格视图
<thead>
<tr>
<th>#</th>
<th>Paper Board</th>
<th>
<div class="row">
<div class="col-md-8 text-center">Openings</div>
</div>
<div class="row">
<div class="col-md-4 text-center">Reams</div>
<div class="col-md-4 text-center">sheets</div>
</div>
</th>
<th>
<div class="row">
<div class="col-md-8 text-center">Inward</div>
</div>
<div class="row">
<div class="col-md-4 text-center">Reams</div>
<div class="col-md-4 text-center">sheets</div>
</div>
</th>
<th>
<div class="row">
<div class="col-md-8 text-center">Outward</div>
</div>
<div class="row">
<div class="col-md-4 text-center">Reams</div>
<div class="col-md-4 text-center">sheets</div>
</div>
</th>
<th>
<div class="row">
<div class="col-md-8 text-center">Balance</div>
</div>
<div class="row">
<div class="col-md-4 text-center">Reams</div>
<div class="col-md-4 text-center">sheets</div>
</div>
</th>
</tr>
</thead>
<tbody style="cursor:pointer" v-for="(statement,index) in statements">
这是用户单击表行时调用的单击按钮 它在点击时传递了多个ID,并使用这些ID显示了来自api的数据
<tr class ="accordion"
@click="statementDetail(index,statement.paper_quality_id.id,statement.paper_brand_id.id,statement.paper_size_id.id,statement.thickness)"
>
<td>{{index+1}}</td>
<td>
{{statement.paper_quality_id.paper_quality}} -
{{statement.paper_size_id.length}} X {{statement.paper_size_id.width}} -
{{statement.paper_brand_id.paper_brand}} -
{{statement.thickness}}
</td>
<td>
<div class="row">
<div
class="col-md-4 text-center"
>{{parseInt((statement.in_total_before - statement.total_out_before)/500)}}</div>
<div
class="col-md-4 text-center"
>{{parseInt((statement.in_total_before - statement.total_out_before)%500)}}</div>
</div>
</td>
<td>
<div class="row">
<div
class="col-md-4 text-center"
>{{parseInt((statement.total_sheets_in_range)/500)}}</div>
<div
class="col-md-4 text-center"
>{{parseInt((statement.total_sheets_in_range)%500)}}</div>
</div>
</td>
<td>
<div class="row">
<div
class="col-md-4 text-center"
>{{parseInt((statement.total_outward_range)/500)}}</div>
<div
class="col-md-4 text-center"
>{{parseInt((statement.total_outward_range)%500)}}</div>
</div>
</td>
<td>
<div class="row">
<div class="col-md-4 text-center">
{{
parseInt((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)/500)
}}
</div>
<div class="col-md-4 text-center">
{{
parseInt((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)%500)
}}
</div>
</div>
</td>
</tr>
这是我的嵌套表,它显示用户单击任何tr元素
<tr :id="'show_'+index" style="display:none;">
<td colspan="6">
<table class="table table-hover">
<tr>
<th>Date</th>
<th>Opening</th>
<th>Inward</th>
<th>Outward</th>
<th>Balance</th>
</tr>
<tr v-for="(_statement,index) in statements_details">
<td>{{_statement.date}}</td>
<td>
<div class="row">
<div
class="col-md-3 text-center"
>{{parseInt((_statement.opening.total_in - _statement.opening.total_out)/500)}}</div>
<div
class="col-md-3 text-center"
>{{parseInt((_statement.opening.total_in - _statement.opening.total_out)%500)}}</div>
</div>
</td>
<td>
<div class="row">
<div class="col-md-3 text-center">{{parseInt((_statement.inward)/500)}}</div>
<div class="col-md-3 text-center">{{parseInt((_statement.inward)%500)}}</div>
</div>
</td>
<td>
<div class="row">
<div class="col-md-3 text-center">{{parseInt((_statement.outward)/500)}}</div>
<div class="col-md-3 text-center">{{parseInt((_statement.outward)%500)}}</div>
</div>
</td>
<td>
<div class="row">
<div
class="col-md-3 text-center"
>{{parseInt((_statement.balance.total_in - _statement.balance.total_out)/500)}}</div>
<div
class="col-md-3 text-center"
>{{parseInt((_statement.balance.total_in - _statement.balance.total_out)%500)}}</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
这是点击功能
statementDetail(rowid, paper_id, brand_id, size_id, thickness) {
const userDetail = {
account_access_key_id: $('#ledger_id').val(),
start_date: this.start_date + ' 00:00:00.957761',
end_date: this.end_date + ' 00:00:00.957761',
paper_quality_id: paper_id,
paper_brand_id: brand_id,
paper_size_id: size_id,
thickness: thickness
}
axios.post('/StatementDetail/', userDetail)
.then((response) => {
$('#show_' + rowid).toggle();
this.statements_details = response.data;
}).catch((err) => {
console.log(err)
});
}
},