element-ui树形表格，左边勾选，右边显示选中的数据-功能（如动图）

功能如图

功能需求

表格树形表格勾选数据，右边显示对应勾选的数据内容，选中客户，自动勾选所有的店铺(子级)，选中其中一个店铺，自动勾选上客户(父级)，同时会存在只有客户（下面没有子级的情况），该功能还涉及到全选（不细讲），搜索勾选，搜索其中一个店铺，或者搜索客户显示所有店铺在勾选（如上面动态图）

功能思路

第一步我们确认此时是勾选动作还是取消勾选动作

第二步我们确认此时勾选的数据是当前哪一个

第三步我们确认此时勾选类型的是客户还是店铺

第四步根据勾选动作和勾选类型去做不同的逻辑操作

1.此时是选中状态---此时是选中的是店铺，通过当前页的客户数据下的店铺数据循环跟我们当前选中的数据对比，找到当前选中的客户数据(leftParent)，存在两种情况

  • 此时店铺所挂载客户不存在右边，需将客户同时勾选上并往右边加上数据
  • 此时店铺所挂载客户存在右边，只需将店铺数据往右边加

若是此时选中的是客户,存在两种情况

  • 存在有店铺的情况， (勾选客户会自动勾选店铺 触发下面点击店铺的操作)
  • 存在没有店铺 只有客户的情况 （重新写一种情况就是没有店铺，即当前点击的target.shopList没有值，或者为空数组）

2.此时是取消勾选状态--此时是选中的店铺，先通过当前页客户的数据下的店铺数据循环跟我们当前选中的数据对比，找到当前选中的客户数据(leftParent)，并此时知道右边所有的数据循环跟当前选中的左边客户数据对比，找到此时右边跟左边的相同的数据(rightParent)

  • 此时找到相同的数据rightParent下的shopList的长度大于0，找到当前店铺的下标，然后取消勾选
  • 当rightParent的shopList的长度等于0时，说明此时的店铺数据全部取消勾选，此时要同时取消该客户的勾选

此时是取消勾选状态-此时选中的是客户，两种情况

  • 点击的客户是没有店铺的情况（直接取消该客户）
  • 点击的客户是存在店铺的情况（点击客户，触发点击事件把所有的店铺也取消勾选，走上面的店铺取消勾选事件）

数据结构

[{"custId": "460860740775766666","custCode": "ZT10009999","custName": "邵阳县永民雄新置业有限公司","labels": null,"labelnames": "智屏传统（剔除福州）,乐华代理商","shopCodes": null,"shopList": [{"shopId": "460861654907518976","shopCode": "DP20230625366666","shopName": "智能家庭京东专卖店1号店","labels": null,"labelnames": null},{"shopId": "460864194063667200","shopCode": "DP202306258888888","shopName": "酷友天猫优品旗舰店1号店","labels": null,"labelnames": null},{"shopId": "460865727429906432","shopCode": "DP20230625188888","shopName": "酷友天猫优品旗舰店2号店","labels": null,"labelnames": null},{"shopId": "460888467817926656","shopCode": "DP20230625179999","shopName": "智能家庭京东专卖店2号店","labels": null,"labelnames": null}]},{"custId": "470195685059002368","custCode": "ZT10006888","custName": "邵阳县大山贸易有限公司","labels": null,"labelnames": null,"shopCodes": null,"shopList": null}
]

部分代码如下

            <el-tableref="filterCusTable"v-loading="leftLoading":data="customerList":show-header="true"tooltip-effect="dark":header-cell-class-name="cellClass"default-expand-all:tree-props="{ children: 'shopList' }"row-key="custCode"max-height="600"min-height="400"@select="selectChange"@selection-change="handleSelectionChange"><el-table-column type="selection" width="30"></el-table-column><el-table-columnlabel="客户名称"prop="custName"></el-table-column><el-table-columnlabel="客户编码"prop="custCode"></el-table-column><el-table-columnlabel="客户标签"prop="labelnames"></el-table-column></el-table>/*** 用于树形表格多选，单选的封装* @param selection* @param row*/selectChange(selection, row) {console.log('selection', selection, row)const isCust = Array.isArray(row.shopList)//勾选的客户把以下的店铺全部带上勾选if (isCust) {const isAdd = !this.leftSelectedList.some((cust) => cust.custCode === row.custCode)console.log('isAdd', isAdd)// 这里得 nextTickthis.$nextTick(() => {row.shopList.forEach((shop) =>this.$refs.filterCusTable.toggleRowSelection(shop, isAdd))})}},//左侧客户选择handleSelectionChange(selections) {console.log('selections2', selections)if (this.initializing == true) return//selections是当前页勾选的数据 包含了客户和店铺//this.leftSelectedList 一开始进来页面此时左边已经勾选上的数据（切换分页的时候会跟着变化是当前页所勾选的数据）// 判断是新增还是减少let isAdd = false//当前选中的数据let target = null//选中的方法const toggleSelection = (row, selected) =>this.$refs.filterCusTable.toggleRowSelection(row, selected)console.log('selections2', selections)console.log('this.leftSelectedList', this.leftSelectedList)if (//可能会存在重复的数据selections.length > uniqBy(this.leftSelectedList, 'custCode').length) {isAdd = true//创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中target = difference(selections, this.leftSelectedList)[0]} else {// 取消选择target = difference(this.leftSelectedList, selections)[0]}this.leftSelectedList = selections//知道当前target点击的值是什么，就能区分我们当前勾选的是店铺还是客户//shopCode可能是null undefined和""const isShop = !!target.shopCode //此时就能知道点击的是店铺let parent = null//如果点击了店铺 通过当前页的数据循环找到当前满足一项的数据//就退出循环得到的数据就是父数据(客户)if (isShop) {parent = this.customerList.find((item) => {return (item.shopList || []).some((shop) => shop.shopCode === target.shopCode)})console.log('parent', parent)}//此时选中if (isAdd) {if (isShop) {//选中的是店铺，需要同时也选中父级的客户行toggleSelection(parent, true)this.pushToRight(target)} else {// 当前选中父亲，//1.存在有店铺的情况， (勾选客户会自动勾选店铺 触发下面点击店铺的操作)//2.存在没有店铺 只有客户的情况 （重新写一种情况就是没有店铺，即当前点击的target.shopList没有值，或者为空数组）toggleSelection(target, true)this.pushToRight(target)}}//取消选中else {if (isShop) {//如果点击的是店铺 则取消店铺操作勾选 从右边的数据移除this.removeRightShop(target)} else {//如果点击的是客户，还是两种情况//1.存在有店铺的情况， (勾选客户会自动勾选店铺 触发下面点击店铺的操作)//2.存在没有店铺 只有客户的情况 （重新写一种情况就是没有店铺，即当前点击的target.shopList没有值，或者为空数组）//2取消选中客户 没有店铺的情况this.removeRightShop(target)//1有店铺的情况，判断它此时shopList有数据，取消勾选 自动触发方法target.shopList &&target.shopList.length > 0 &&target.shopList.forEach((row) => toggleSelection(row, false))}}},//选中---把数据往右边List加pushToRight(row) {console.log('row', row)const leftParent = this.customerList.find((item) => {return (item.shopList || []).some((shop) => shop.shopCode === row.shopCode)})//leftParent可能会存在undefined的情况//判断右边的父级(客户)数据是否已经存在右边,并找到此时右边的父级(客户)数据const rightParent =leftParent &&this.rightCustomerList.find((item) => item.custCode === leftParent.custCode)if (rightParent) {// 如果右边已经存在该店铺的客户，// 但找不到该店铺的存在则直接push进来if (!(rightParent.shopList || []).some((shop) => shop.shopCode === row.shopCode)) {rightParent.shopList.push({ ...row })}} else {//如果右边不存在该店铺的客户if (leftParent) {const parent = { ...leftParent } //浅拷贝 方便进行数据处理和操作parent.shopList = [{ ...row }] //浅拷贝展开操作，生成一个新的对象，用新对象将parent.shopList数组对象替换this.rightCustomerList.push(parent) //通过以上的操作 这样就不会影响左边的数据// 刷新右边的数据this.tableData = this.rightCustomerList.slice((this.pageTwo - 1) * this.pagesize,this.pageTwo * this.pagesize)} else {//客户没有店铺的情况，直接添加//一定要记得深拷贝一份，否则会出现影响左边数据的存在(如取消勾选掉子的会splice干掉)if (!row.shopList || row.shopList.length == 0) {let pushRow = JSON.parse(JSON.stringify(row))this.rightCustomerList.push(pushRow)// 刷新右侧this.tableData = this.rightCustomerList.slice((this.pageTwo - 1) * this.pagesize,this.pageTwo * this.pagesize)}}}},//取消选中 --把数据从左边删除removeRightShop(row) {const leftParent = this.customerList.find((item) => {return (item.shopList || []).some((shop) => shop.shopCode === row.shopCode)})const rightParent =leftParent &&this.rightCustomerList.find((item) => item.custCode === leftParent.custCode)//此时知道右边的当前选中右边选中的数据，然后拿到当前选中的数据，//通过当前拿到rightParent数据中的shopList来判断//shopList长度大于0的是店铺--取消客户下的店铺//shopList长度为0的时候 说明所有店铺都取消，同时要取消该客户/*   1.此时找到相同的数据rightParent下的shopList的长度大于0，找到当前店铺的下标，然后取消勾选2.当rightParent的shopList的长度等于0时，说明此时的店铺数据全部取消勾选，此时要同时取消该客户的勾选 */if (rightParent) {//客户有店铺的情况console.log('执行了几次', rightParent)const shopIndex = rightParent.shopList.findIndex((shop) => shop.shopCode === row.shopCode)//获取到当前删除店铺的下标 然后取消勾选if (shopIndex > -1) {rightParent.shopList.splice(shopIndex, 1)}if (rightParent.shopList.length === 0) {const custIndex = this.rightCustomerList.findIndex((item) => item.custCode === rightParent.custCode)if (custIndex > -1) {this.rightCustomerList.splice(custIndex, 1)// 刷新右侧this.tableData = this.rightCustomerList.slice((this.pageTwo - 1) * this.pagesize,this.pageTwo * this.pagesize)// 左侧取消选中父级this.$refs.filterCusTable.toggleRowSelection(leftParent, false)}}} else {//客户没有店铺的情况console.log('row', row)if (!row.shopList || row.shopList.length == 0) {const custIndex = this.rightCustomerList.findIndex((item) => item.custCode === row.custCode)console.log('custIndex', custIndex)if (custIndex > -1) {this.rightCustomerList.splice(custIndex, 1)// 刷新右侧this.tableData = this.rightCustomerList.slice((this.pageTwo - 1) * this.pagesize,this.pageTwo * this.pagesize)}}}},

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【数据结构】栈及其实现

【数据结构】栈及其实现

目录 1.栈的概念及结构 2.栈的实现 2.1栈结构定义 2.2初始化及销毁 2.3插入数据 2.4删除数据 2.5访问栈顶数据 2.6判断是否为空栈 2.7计算栈的大小 3.8访问栈中所有数据 1.栈的概念及结构 栈&#xff1a;栈是一种特殊的线性表&#xff0c;其只允许在固定的一端进行插…
阅读更多...
Oracle 开发篇+Java通过共享模式访问Oracle数据库

Oracle 开发篇+Java通过共享模式访问Oracle数据库

标签&#xff1a;共享服务器进程、shared server process释义&#xff1a;shared server process是Oracle的一种数据库连接技术&#xff0c;类似的还有专用模式和DRCP ★ 数据库配置 alter system set shared_server_sessions1 scopespfile; alter system set max_shared_serv…
阅读更多...
FPGA优质开源项目 - UDP RGMII千兆以太网

FPGA优质开源项目 - UDP RGMII千兆以太网

本文介绍一个FPGA开源项目&#xff1a;UDP RGMII千兆以太网通信。该项目在我之前的工作中主要是用于FPGA和电脑端之间进行图像数据传输。本文简要介绍一下该项目的千兆以太网通信方案、以太网IP核的使用以及Vivado工程源代码结构。 Vivado 的 Tri Mode Ethernet MAC IP核需要付…
阅读更多...
谈谈Spring与字节码生成技术

谈谈Spring与字节码生成技术

Java程序员几乎都了解Spring。 它的IoC&#xff08;依赖反转&#xff09;和AOP&#xff08;面向切面编程&#xff09;功能非常强大、易用。而它背后的字节码生成技术&#xff08;在运行时&#xff0c;根据需要修改和生成Java字节码的技术&#xff09;就是一项重要的支撑技术。 …
阅读更多...
协程（一）单机--》并发--》协程

协程（一）单机--》并发--》协程

目录 一 协程的概述1.1 并行与并发1.2 线程1.3 新的思路1.4 Goroutine 二 第一个入门程序 一 协程的概述 我查看了网上的一些协程的资料&#xff0c;发现每个人对协程的概念都不一样&#xff0c;但是我认可的一种说法是&#xff1a;协程就是一种轻量级的线程框架&#xff08;K…
阅读更多...
uniapp软键盘谈起遮住输入框和头部被顶起的问题解决

uniapp软键盘谈起遮住输入框和头部被顶起的问题解决

推荐&#xff1a; pages.json中配置如下可解决头部被顶起和表单被遮住的问题。 { "path": "pages/debug/protocol/tagWord", "style": { "app-plus": { "soft…
阅读更多...
基于Containerd容器引擎和kubeadm工具部署K8sv1.26.3

基于Containerd容器引擎和kubeadm工具部署K8sv1.26.3

kubernetes master节点及node节点各核心组件的功能概述 master节点主要组件概述 master节点主要是k8s的控制节点&#xff0c;在master节点上主要有三个组件必不可少&#xff0c;apiserver、scheduler和controllermanager&#xff1b;etcd是集群的数据库&#xff0c;是非常核心的…
阅读更多...
关于Postman如何配置随请求携带token

关于Postman如何配置随请求携带token

文章目录 一些吐槽实际应用 一些吐槽 首先吐槽一下 postman官网的文档说明&#xff0c;真是乱七八糟&#xff0c;一点都不清晰&#xff0c;能不能好好写用户手册啊&#xff08;比如把用户都当作初始小白&#xff09; 然后吐槽一下网上铺天盖地让我写js脚本应用全局access toke…
阅读更多...
Oracle 知识篇+会话级全局临时表在不同连接模式中的表现

Oracle 知识篇+会话级全局临时表在不同连接模式中的表现

标签&#xff1a;会话级临时表、全局临时表、幻读释义&#xff1a;Oracle 全局临时表又叫GTT ★ 结论 ✔ 专用服务器模式&#xff1a;不同应用会话只能访问自己的数据 ✔ 共享服务器模式&#xff1a;不同应用会话只能访问自己的数据 ✔ 数据库驻留连接池模式&#xff1a;不同应…
阅读更多...
kafka是有序的吗？如何保证有序？

kafka是有序的吗？如何保证有序？

首先&#xff0c;Kafka无法保证消息的全局有序性&#xff0c;这是因为Kafka的设计中允许多个生产者并行地向同一个主题写入消息。而且&#xff0c;一个主题可能会被划分为多个分区&#xff0c;每个分区都可以在独立的生产者和消费者之间进行并行处理。因此&#xff0c;生产者将…
阅读更多...
js玩儿爬虫

js玩儿爬虫

前言 提到爬虫可能大多都会想到python&#xff0c;其实爬虫的实现并不限制任何语言。 下面我们就使用js来实现&#xff0c;后端为express&#xff0c;前端为vue3。 实现功能 话不多说&#xff0c;先看结果&#xff1a; 这是项目链接&#xff1a;https://gitee.com/xi1213/w…
阅读更多...
为什么说要拥抱内容生成器ChatGPT，以学生为例说明

为什么说要拥抱内容生成器ChatGPT，以学生为例说明

精灵从瓶子里出来了。 潘多拉的魔盒已经被打开。 纸已经包不住火了。 无论你喜欢用什么比喻来说明那些不可逆转的事情&#xff0c;现在都可以就把它们用到人工智能的出现。使用ChatGPT等AI工具生成的内容就在那里&#xff0c;而且不仅不会消失&#xff0c;还会越来越个性化&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023