单击另一个表格行时关闭上一个表格行 [英] Close previous table row when clicking on another table row
本文介绍了单击另一个表格行时关闭上一个表格行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在将数据提取到表格中，并在单击任何表格行时打开表格行内的嵌套 colspan.如果我点击另一个表格行，我想关闭上一个表格行(就像手风琴一样)
这是一个表体结构
<tr @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"></td><td><div class="row">
</td><td><div class="row">
</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 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)}}
</td></tr>
这是我们点击表格行时出现的嵌套表格
</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>
</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>
</td><td><div class="row">
</td></tr></td></tr></tbody>
这是我的js文件
出口默认{数据() {返回 {陈述:'',用户:[],账本名称:'',paper_details: '',account_list:假，//语句对象ID: ''，开始日期: ''，结束日期: ''，paper_quality_id: '',paper_size_id: '',paper_brand_id: '',厚度: ''，声明_详细信息:''，stockIDS: '',索引数据:''};},创建(){this.fetchData();},成分: {appInventoryNavigation: InventoryNavBar,},方法: {//获取账本账户列表取数据(){var vm = 这个；axios.get('/账本/').then((响应) => {控制台日志(响应)vm.users = response.data}).catch((错误) => {控制台日志(错误)});},//在隐藏输入字段中设置LedgerIDsetLedgerID_1(id, name) {this.account_name = id;this.account_list = false;this.id = id;this.ledger_name = 名称；},称呼() {this.account_list = true;},//发布LedgeIDPostLedgerID(e) {e.preventDefault();const AccountDetail = {id:this.id，开始日期:this.start_date + '00:00:00.957761',结束日期:this.end_date + '00:00:00.957761'}var vm = 这个；axios.post('/Statement/', AccountDetail).then((响应) => {控制台日志(响应)vm.statements = response.data;}).catch((错误) => {控制台日志(错误)});},//显示隐藏嵌套表statementDetail(rowid，paper_id，brand_id，size_id，厚度){this.indexData = rowid;警报(this.indexData)常量用户详细信息 = {account_access_key_id: $('#ledger_id').val(),开始日期: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,厚度:厚度}axios.post('/StatementDetail/', userDetail).then((响应) => {$('#show_' + rowid).toggle();this.statements_details = response.data;}).catch((错误) => {控制台日志(错误)});}},};
解决方案 Change v-show="indexData === index".
并在您的方法中检查 rowid 是否已更改并在 axios 请求后移动 this.indexData = rowid;:
statementDetail(rowid、paper_id、brand_id、size_id、厚度){if (rowid !== this.indexData){常量用户详细信息 = {account_access_key_id: $('#ledger_id').val(),开始日期: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,厚度:厚度}axios.post('/StatementDetail/', userDetail).then((响应) => {$('#show_' + rowid).toggle();this.statements_details = response.data;}).catch((错误) => {控制台日志(错误)});this.indexData = rowid;}}
祝你好运.
I'm fetching data into the table and on clicking any table row it open a nested colspan inside table row. I want to close previous table row if i click on another table row (Like accordion does )
this is a table body structure
<tbody style="cursor:pointer" v-for="(statement,index) in statements">
<tr @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>
This the nested table it appears when we click on table row
<tr :id="'show_'+index" v-if = "index = indexData" >
<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>
This is my js file
export default {
data() {
return {
statements: '',
users: [],
ledger_name: '',
paper_details: '',
account_list: false,
//statement Objects
id: '',
start_date: '',
end_date: '',
paper_quality_id: '',
paper_size_id: '',
paper_brand_id: '',
thickness: '',
statements_details: '',
stockIDS: '',
indexData: ''
};
},
created() {
this.fetchData();
},
components: {
appInventoryNavigation: InventoryNavBar,
},
methods: {
// Fetching Ledger Account List
fetchData() {
var vm = this;
axios.get('/ledger/')
.then((response) => {
console.log(response)
vm.users = response.data
}).catch((err) => {
console.log(err)
});
},
//Setting LedgerID In Hidden Input Field
setLedgerID_1(id, name) {
this.account_name = id;
this.account_list = false;
this.id = id;
this.ledger_name = name;
},
call() {
this.account_list = true;
},
//Posting LedgeID
PostLedgerID(e) {
e.preventDefault();
const AccountDetail = {
id: this.id,
start_date: this.start_date + ' 00:00:00.957761',
end_date: this.end_date + ' 00:00:00.957761'
}
var vm = this;
axios.post('/Statement/', AccountDetail)
.then((response) => {
console.log(response)
vm.statements = response.data;
}).catch((err) => {
console.log(err)
});
},
//Show Hide Nested Table
statementDetail(rowid, paper_id, brand_id, size_id, thickness) {
this.indexData = rowid;
alert(this.indexData)
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)
});
}
},
};
解决方案 Change v-show="indexData === index".
And in your method check if rowid is changed and move this.indexData = rowid; after axios request:
statementDetail(rowid, paper_id, brand_id, size_id, thickness) {
if (rowid !== this.indexData){
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)
});
this.indexData = rowid;
}
}
Good luck.
这篇关于单击另一个表格行时关闭上一个表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆