当子组件选中,但并未保存并未与数据库交互的情况下,关闭了页面,再次打开子组件弹窗需要回显之前选中的数据
//子组件
<el-table
highlight-current-row
v-loading="loading"
:data="tableData"
:size="tableSize"
:height="tableHeight"
class="l_table_header"
width="100%"
border
stripe
ref="addfeeToBillTable"
@selection-change="handleSelectTable"
>
...
列数据
...
列数据
...
<div style="height: 10px"></div>
已选条数 - 总条数: {{ selectedDataNum }}/{{ tableData.length }}
</el-table>
data(){
selectedDataNum: 0, //选中的数据条数
rowSelectFlag: false // 禁止toggleRowSelection默认触发handleSelectionChange
}
// 在子组件中选中数据时,
// 1、首先赋值给selections
// 2、清空localstorage中上一次可能存过的数据
// 3、清空选中条数
// 4、计算表格数
// 5、将新选中的数据存在local storage以便父组件读取
// 6、emit事件
// 复选框选中的数据
handleSelectTable(data) {
if (this.rowSelectFlag) return
console.log("data: ", data);
// 清空之前的
localStorage.removeItem("thisselections");
this.selectedDataNum = 0; //清空选中条数
// 便利表格数据,判断选中数据条数
this.tableData.forEach((ele) => {
data.forEach((item) => {
if (ele.pkReceivable && ele.pkReceivable == item.pkReceivable) {
ele.selectFlag = true;
this.selectedDataNum++;
}
});
});
this.selections = data;
localStorage.setItem("thisselections", JSON.stringify(this.selections));
console.log("this.selections: ", this.selections);
this.$emit("addFeeToBillSelection", this.selections);
},
// 子组件选中数据,但是发生保存操作,没有与数据库发生交互时,需要将选中的数据回显
mounted(){
setTimeout(() => {
// // 读取之前的缓存
this.selections = JSON.parse(localStorage.getItem("thisselections"));
console.log('this.selections: ', this.selections);
// 重新设置为选中状态
this.tableData.forEach((ele) => {
this.selections.forEach((item) => {
if (ele.pkReceivable && ele.pkReceivable == item.pkReceivable) {
this.rowSelectFlag = true//避免触发默认的表格选中事件导致选中失效
ele.selectFlag = true;
this.selectedDataNum++;
this.$refs.addfeeToBillTable.toggleRowSelection(ele, true);
}
});
});
this.rowSelectFlag = false
this.$forceUpdate();
}, 1000);
}
//父组件
<el-dialog
title="添加费用到账单"
:visible.sync="addFeeToBillVisible"
width="90%"
append-to-body
:close-on-click-modal="false"
:before-close="handleAddFeeToBillClose"
>
<addFeeToBill
v-if="addFeeToBillVisible"
:addFeeToBillObj="addFeeToBillObj"
:pkBill="pkBill"
@addFeeToBillSelection="addFeeToBillSelection"
></addFeeToBill>
<div slot="footer" class="dialog-footer">
<el-button @click="handleConfirmQuick">
{{ $lang.save }}
</el-button>
<el-button @click="handleAddFeeToBillClose">{{
$lang.close
}}</el-button>
</div>
</el-dialog>
// 选择费用数据,从子组件中传递回显到新增账单弹窗
addFeeToBillSelection(eventData) {
// 清除上一组选中的费用数据
this.addFeeToBillSelectionList = [];
console.log("eventData: ", eventData);
this.isSameData = false; // 重置为 false
console.log(
"this.addFeeToBillSelectionList974-: ",
this.addFeeToBillSelectionList
);
for (const item of eventData) {
console.log("item: ", item);
let foundItem = null;
foundItem = this.addFeeToBillSelectionList.find(
(item2) => item.pkReceivable === item2.pkReceivable
);
console.log("foundItem: ", foundItem);
if (foundItem) {
this.isSameData = true;
break;
}
}
console.log("this.isSameData: ", this.isSameData);
if (this.isSameData) {
console.log("123-999");
this.$message({
type: "error",
message: "已存在相同数据,无法重复添加!",
});
return;
} else {
console.log("添加数据");
this.addFeeToBillSelectionList = eventData;
}
},
// 保存
handleConfirmQuick() {
if (this.isSameData) {
this.$message({
type: "error",
message: "已存在相同数据,无法重复添加!",
});
return;
} else {
console.log("添加数据");
// 将选中的数据回显到表格
// this.addFeeToBillSelectionList.forEach((ele) => {
// this.tableData.push(ele);
// });
for (const ele of this.addFeeToBillSelectionList) {
if (
!this.tableData.some(
(item) => item.pkReceivable === ele.pkReceivable
)
) {
// 如果 tableData 数组中不包含当前元素,则添加到数组
this.tableData.push(ele);
}
}
// 关闭弹窗
this.addFeeToBillVisible = false;
}
},