含有复选框的表格显示与隐藏切换
点击切换按钮表格显示与隐藏
如果使用v-if，注意使用this.nextTick，并且this.nextTick 放的位置在里面，不要显示表格的时候就使用this.
toggleRowSelection 无效，并影响下一次循环
<el-table
v-if="isShowTable"
:data="tableData3"
style="width: 500px"
height="250"
border
id="table"
ref="multipleTable"
@selection-change="handleSelectionChange"
> handleSelectionChange(selection) {
this.selectedTableRow = selection;
console.log(this.selectedTableRow);
}, handleChange() {
this.isShowTable = !this.isShowTable;
if (this.isShowTable) {
this.$nextTick(() => {
for (let i = 0; i < this.tableData3.length; i++) {
for (let j = 0; j < this.selectedTableRow.length; j++) {
console.log(this.selectedTableRow)
if (this.tableData3[i].zip == this.selectedTableRow[j].zip) {
this.$refs.multipleTable.toggleRowSelection(this.tableData3[i]);
})
}
}
}
});
}
},刚开使用上面的代码，发现显示的选中行有问题，改成下面的代码，把 this.$nextTick 放到toggleRowSelection中外面，就可以正常显示
handleChange() {
this.isShowTable = !this.isShowTable;
if (this.isShowTable) {
// this.$nextTick(() => {
for (let i = 0; i < this.tableData3.length; i++) {
for (let j = 0; j < this.selectedTableRow.length; j++) {
console.log(this.selectedTableRow)
if (this.tableData3[i].zip == this.selectedTableRow[j].zip) {
this.$nextTick(() => {
// 没有生成Dom 影响下一次循环执行
this.$refs.multipleTable.toggleRowSelection(this.tableData3[i]);
})
}
}
}
// });
}如果数据没有变化可以使用v-show
<el-table
v-show="isShowTable"
:data="tableData3"
style="width: 500px"
height="250"
border
id="table"
ref="multipleTable"
@selection-change="handleSelectionChange"
> handleChange() {
this.isShowTable = !this.isShowTable;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读