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

news2024/10/7 16:25:56

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

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/743722.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Layui菜单模块

今天继续有我给大家layui菜单在web中的应用 一.介绍 1.什么是菜单模块&#xff1f; Layui是一个轻量级的前端框架&#xff0c;提供了丰富的UI组件和便捷的开发方式&#xff0c;而菜单模块是Layui中的一个核心组件之一&#xff0c;用于创建和管理网页导航菜单。 2.…

亚马逊云科技,迈向十年新进阶

编辑&#xff1a;阿冒 设计&#xff1a;沐由 自2013年进入国内至今&#xff0c;亚马逊云科技见证了中国数字经济开启量质齐升的十年。在这十年里&#xff0c;亚马逊云科技持续不断地帮助广大中国企业实现上云重塑和云上创新。 从一间公司的时间节点而言&#xff0c;无论是中文的…

C. Removing Smallest Multiples - 贪心+思维

分析&#xff1a; 首先对于k&#xff0c;可以一直删除k的倍数&#xff0c;直到遇到1&#xff0c; 可以贪心从小到大枚举每一个数&#xff0c;统计删去所有0所在位置时的总代价。 代码&#xff1a; #include <bits/stdc.h>using namespace std;typedef long long ll; ty…

服务器数据库中了360后缀勒索病毒怎么办,怎么解决与防范?

随着网络攻击的不断增加&#xff0c;服务器中受到360后缀勒索病毒的威胁也日益严重。360后缀勒索病毒是beijingcrypt勒索家族中的病毒&#xff0c;该病毒采用了复杂的加密程序&#xff0c;一旦被该病毒攻击&#xff0c;它会将会对服务器上的所有文件进行加密&#xff0c;并要求…

Android系统启动流程分析

当按下Android系统的开机电源按键时候&#xff0c;硬件会触发引导芯片&#xff0c;执行预定义的代码&#xff0c;然后加载引导程序(BootLoader)到RAM&#xff0c;Bootloader是Android系统起来前第一个程序&#xff0c;主要用来拉起Android系统程序&#xff0c;Android系统被拉起…

设计模式——装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说&#xff0c;装饰者模式相比生成子类更灵活 优缺点和应用场景 优点 拓展某个类的功能&#xff0c;附加功能动态地给一个对象增加功能&#xff0c;这些功能可以动态地撤销需要给一批兄弟类进行改装或加…

Databend 开源周报第 101 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 教程 | 使用 AW…

【技能实训】DMS数据挖掘项目-Day05

文章目录 任务6【任务6.1】创建数据分析接口【任务6.2】创建数据过滤抽象类【任务6.3】编写日志数据分析类【任务6.4】创建日志数据分析测试类&#xff0c;测试任务6.1-6.3中的程序&#xff0c;演示日志信息的采集、分析及打印输出 任务6 【任务6.1】创建数据分析接口 在com.…

单片机如何开启TFTP服务器

一、开发测试环境 野火stm32开发板&#xff0c;w5500模块&#xff0c;Tftpd64软件&#xff0c;rt-thread操作系统和netutils软件包&#xff08;网络小工具集&#xff09;。&#xff08;RT-Thread 目前支持 TFTP 服务器和 TFTP 客户端&#xff09;。 二、tftp介绍-简单文件传输的…

matlab学习指南(1):matlab初步入门详细介绍

&#x1f305;*&#x1f539;** φ(゜▽゜*)♪ **&#x1f539;*&#x1f305; 欢迎来到馒头侠的博客&#xff0c;该类目主要讲数学建模的知识&#xff0c;大家一起学习&#xff0c;联系最后的横幅&#xff01; 喜欢的朋友可以关注下&#xff0c;私信下次更新不迷路&#xff0…

Linux C程序开发,多线程编程、网络编程

目录 多线程编程 网络编程 Linux C程序开发是指在Linux操作系统下使用C语言进行开发的过程。Linux是一种开源的操作系统&#xff0c;具有稳定性、安全性和灵活性等优点&#xff0c;因此在很多领域都得到了广泛的应用。 多线程编程 多线程编程是指在一个程序中同时运行多个线…

二、OAuth2 client对接Spring Authorization Server

这里用的是授权码模式 搭建&#xff1a;Spring Authorization Server 代码结构如下&#xff1a; 代码实现 添加依赖 <dependency> <groupId>org.springframework.boot</groupId> …

Failed to connect to github.com port 443: Connection refused问题解决

文章目录 一、问题描述&#xff1a;Failed to connect to github.com port 443: Connection refused问题解决二、解决方法一&#xff1a;排查代理问题1、尝试重置代理或者取消代理的方式2、添加全局代理 三、解决方法二&#xff1a;排查DNS解析问题1、第一步&#xff1a;查找gi…

软考高级之系统架构师系列之软件开发模型

概述 如标题所述。本文面向于软考高级&#xff0c;具体来说是系统架构师。 本来几乎是纯粹的理论知识汇总&#xff0c;用于应付软考&#xff0c;在理解基础上注意抠字眼。 软件开发方法 分类描述结构化法强调用户至上&#xff0c;严格区分工作阶段&#xff0c;每阶段都有任…

老电脑如何用U盘重装系统?老电脑用U盘重装系统教程

老电脑如何用U盘重装系统&#xff1f;用户利用U盘来给老电脑重装系统&#xff0c;能够帮助解决老电脑运行缓慢、系统出现故障或感染病毒等问题&#xff0c;通过重装系统&#xff0c;可以清除旧的系统文件和应用程序&#xff0c;重新安装一个干净且高效的操作系统&#xff0c;那…

Java8实战-总结1

Java8实战-总结1 基础知识流处理用行为参数化把代码传递给方法并行与共享的可变数据Java需要演变 Java 中的函数 基础知识 流处理 流是一系列数据项&#xff0c;一次只生成一项。程序可以从输入流中一个一个读取数据项&#xff0c;然后以同样的方式将数据项写入输出流。一个程…

TypeScript 学习笔记(二):接口与类型别名、字面量类型

一、接口的定义 在面向对象的编程中&#xff0c;接口是一种规范的定义&#xff0c;它定义了行为和动作的规范&#xff0c;在程序设计里面&#xff0c;接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范&#xff0c;接口不关心这些类的内部状态数据&#xff0…

qt 聊天室

服务器端 widget.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {ui->setupUi(this);//实例化一个服务器对象server new QTcpServer(this);}Widget::~Widget() {delete ui; }…

ELK插件介绍

ELK插件介绍 一、Grok 正则捕获插件1、概述2、内置正则表达式调用3、自定义表达式调用 二、multiline 多行合并插件1、概念2、安装3、使用 multiline 插件 三、date 时间处理插件1、概念2、操作3、时间戳详解 四、mutate 数据修改插件1、概念2、案例 一、Grok 正则捕获插件 1、…

上海亚商投顾:沪指震荡反弹 新能源车产业链再度爆发

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 市场情绪 沪指今日震荡反弹&#xff0c;创业板指午后涨近1%。新能源车产业链再度爆发&#xff0c;整车、零部件、智能驾驶等…