element-ui 子组件表格中选中数据，回显到父组件，并显示选中多少条

当子组件选中，但并未保存并未与数据库交互的情况下，关闭了页面，再次打开子组件弹窗需要回显之前选中的数据

//子组件
<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;
  }
},