树形结构的勾选、取消勾选、删除、清空已选、回显、禁用

树形结构的勾选、取消勾选、删除、清空已选、回显、禁用

基本页面:

分为上传文件和编辑的页面

代码实现要点:

  • 上传文件页面:

    1. 点开选择范围弹窗,三个radio单选框都为可选状态,默认显示的是第一个单选框(按机构项目组)对应的内容

    2. 可以对树形数据进行勾选,勾选的数据展示在右边已选框内

    3. 可以对树形数据进行全选,取消全选

    4. 右边已选框内数据有对应的删除按钮,可以点击删除按钮或对已选数据进行删除

    5. 可以点击清空已选按钮对已选数据进行一次性全部删除

    6. 在左边树形数据取消勾选,右边已选框的数据也会对应发生变化

    7. 点击确定按钮但未确认上传时,再次打开弹框,页面中应把上一次选择的数据展示出来,且不能禁用,并同步展示在右边已选框内,同样可以对数据进行以上操作

    8. 点击确定并在上一层点击确认上传按钮,已经勾选的数据就会传给后端,同步新增到了页面中,后续可以对数据进行编辑操作来修改数据

  • 编辑页面:

    1. 点开选择范围弹窗,只有从后端返回的对应的单选框类型的单选框才能可选,其他的单选框都为禁用状态

    2. 树形数据显示的也是可选单选框对应的树形数据

    3. 从后端得到的上一次确认上传的数据,对数据进行禁用,即只能继续添加不能删除原有的

    4. 从后端得到的上一次确认上传的数据,对数据同步展示在右边已选框

    5. 从后端得到的上一次确认上传的数据,在右边已选框内不能存在删除按钮

    6. 可以继续勾选想要勾选的数据,会同步展示在右边已选框,有删除按钮,可以删除

    7. 点击全选,全选数据,点击反选,把除了从后端得到的上一次确认上传的数据都取消勾选,同时右边已选框也要同步展示

    8. 点击清空已选,把除了从后端得到的上一次确认上传的数据在右边已选框内删除,同时左边的树形结构也要同步取消勾选数据

    9. 点击确定按钮但未确认上传时,再次打开弹框,显示的勾选数据为上次点击确定前勾选的数据,禁用的数据也仅为从后端得到的上一次确认上传的数据,右边已选框也展示的是上次点击确定前勾选的数据,没有删除按钮的也仅为从后端得到的上一次确认上传的数据

    10. 点击确定并在上一层点击确认上传按钮,已经勾选的数据就会传给后端,同步更新到页面中,后续也可以对数据进行编辑操作来修改数据

代码设计:

单选框用到的是el-radio组件

<div class="person_top_nav"><span>选择签署范围</span><el-radio-group style="margin-left: 12px" v-model="searchRange" @change="handleSearchChange"><el-radio style="max-width: 90px" :disabled="!(SelectedType == 'clientOrganization') && disabledArr.length > 0" :label="1">按机构项目组</el-radio><el-radio style="max-width: 60px" :disabled="!(SelectedType == 'organization') && disabledArr.length > 0" :label="2">按事业部</el-radio><el-radio style="max-width: 90px" :disabled="!(SelectedType == 'branchCompany') && disabledArr.length > 0" :label="3">按合约归属公司</el-radio></el-radio-group>
</div>
  • 绑定的是searchRange,点击事件调用的函数是handleSearchChange()函数

  • :disabled="!(SelectedType == 'clientOrganization') && disabledArr.length > 0" 是上传文件和编辑页面对单选框是否禁用的设置,即:第一个按机构项目组被禁用的时候是:在编辑页面disabledArr.length > 0,并且得到的从后端返回的类型不等于clientOrganization(机构项目组)

左边树形数据和右边已选框用到的都是el-tree组件

左边树形数据:

<el-tree:data="dataTree" // 展示数据:default-checked-keys="checkboxId" // 默认勾选节点show-checkbox // 节点可被选择v-loading="loading"class="filter-tree" // 绑定类node-key="value" // 树节点唯一标识ref="tree" // 绑定树,可后续调用方法:props="defaultProps" // 配置选项 defaultProps: { children: 'children', label: 'label'}@check-change="getCheckedNodes" // 节点选中状态发生变化时的回调
>
</el-tree>
  • data属性是绑定展示的数据,这里绑定的是dataTree

  • default-expand-all属性是绑定默认勾选的节点的 key 的数组,绑定的数据为checkboxId,是默认勾选的数据value数组

  • node-key属性是每个树节点用来作为唯一标识的属性,整棵树应该是唯一的,这里绑定的是节点的value

  • check-change事件是节点选中状态发生变化时的回调,绑定着函数getCheckedNodes()

右边已选框数据:

<el-tree :data="isSelectedData" :props="defaultProps" :default-expand-all="true"><span class="custom-tree-node" slot-scope="{ node, data }"><span class="tree_label">{{ node.label }}</span><el-buttonclass="remove_button"v-if="!(node.disabled || data.ifShow)"type="text"size="medium"@click="() => remove(node, data)">×</el-button></span>
</el-tree>

绑定的数据为isSelectedData,default-expand-all默认展开所有节点

重要数据:

dataTree:调用选择radio的接口数据,也就是一棵树

checkboxId:左边树的默认勾选节点,是一个value数组

isSelectedData:右边已选框的展示数据,也就是左边树的数据

searchRange:radio单选框绑定的数据

disabledArr:原始数据,应被禁用和默认勾选,展示【从父组件传入】

peList:上一次勾选提交的数据,应被默认勾选和展示(每一次点击确定后都会被改变)【从父组件传入】

oldDisabledArr:disabledArr得来

oldDisabledArrId:disabledArr得来

SelectedType:从父组件传入的选择范围类型

用到的el-tree方法:

setCheckedNodes():设置目前勾选的节点,使用此方法必须设置 node-key 属性,(nodes) 接收勾选节点数据的数组

getCheckedNodes():若节点可被选择(即 show-checkboxtrue),则返回目前被选中的节点所组成的数组,(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数,1. 是否只是叶子节点,默认值为 false 2. 是否包含半选节点,默认值为 false

setChecked():通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性,(key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false

代码执行流程:

编辑页面:

  1. 点击选择范围弹框,调用open()方法,打开弹框,根据是否有从父组件传入的peList(上一次选择的数据)来判断是上传文件还是编辑页面

    • 上传文件:默认调用机构项目组接口和展示机构项目组树形数据

    • 编辑:调用从父组件传入的SelectedType(选择范围类型),在handleSearchChange()函数内调用对应的接口和展示对应的树形数据

    async opened() {// 存在已选数据this.disabledArr.forEach((item, index) => {this.$set(this.oldDisabledArr, index, item);});this.disabledArr.forEach((item, index) => {this.$set(this.oldDisabledArrId, index, item.value);});
    ​// 打开选择范围弹框this.dialogVisible = true;// clientOrganization 机构项目组   organization 事业部   branchCompany 合约归属公司
    ​if (!this.peList) {// 上传文件 默认选中机构项目组await this.getInstitutionIssueList();} else {// 编辑if (this.SelectedType === 'clientOrganization') {this.searchRange = 1;} else if (this.SelectedType === 'organization') {this.searchRange = 2;} else if (this.SelectedType === 'branchCompany') {this.searchRange = 3;}// 调用对应接口await this.handleSearchChange();// 初始化this.init();}
    }
  2. 调用init()函数,执行的逻辑为

    init() {this.$nextTick(() => {// 给checkboxId赋值this.checkboxId = [];this.peList.map((item, index) => this.$set(this.checkboxId, index, item.value));this.$refs.tree.setCheckedNodes(this.peList);this.$forceUpdate();
    ​// 把禁用节点显示在右边this.getCheckedNodes();
    ​// 禁用已选节点this.reShowDisabled(this.dataTree, this.oldDisabledArrId);
    ​// 去掉父节点的删除按钮this.getParentValueList();});
    }
    • 初始化checkboxId,从peList中得到(上一次选择的数据)【注意:不是从disabledArr中得到,因为如果第一次勾选数据后点击确认,以后在确认上传前再次点击选择范围,页面不会回显上一次勾选的数据,但是确认上传后,提交给后端的又是上一次勾选的数据,不符合逻辑】

    • 通过el-tree的方法setCheckedNodes()设置目前勾选的节点【注意:一定要执行这一步,否则后续指定删除、清空已选、取消勾选并确定后,在确认上传前的再次点击选择范围,被删除的数据节点还是会被勾选和展示在已选框,猜测的原因是没有取消勾选删除的节点数据,即再次设置勾选节点,而不是通过default-expand-all属性来自动勾选】

    • 调用getCheckedNodes()函数,把上一次勾选提交的数据节点展示在右边已选框

      • getCheckedNodes()函数,【这个函数也绑定着左边树的change回调】,里面的逻辑为:调用el-tree的getCheckedNodes()方法,获取目前被选中的节点的数组checkedList,然后用checkedList作为参数调用depthTraversal()函数,递归来返回选中的树形节点,并赋值给isSelectedData,就同步展示在右边已选框了

      // 选择数据 -> 展示 el-tree回调
      getCheckedNodes() {const checkedList = this.$refs.tree.getCheckedNodes(false, true);this.isSelectedData = this.depthTraversal(JSON.parse(JSON.stringify(this.dataTree)), checkedList);
      }
      // 返回选中的数据列表
      depthTraversal(list, filterList) {const addObj = (list) => {return list.filter((v) => {if (v.children && filterList.findIndex((val) => val.value === v.value) !== -1) {v.children = addObj(v.children);return v;}return filterList.findIndex((val) => val.value === v.value) !== -1;});};return addObj(list);
      }
    • 调用reShowDisabled()函数,把禁用节点进行禁用

      • 传入的参数为oldDisabledArrId(感觉等同于checkboxId),利用闭包写一个递归函数并调用,找到value在oldDisabledArrId数组中的节点:

        • 给它设置disabled为true的属性,实现禁用

        • 调用setdisabledParentList()函数,把它的parentValue放入disabledParentList中,便于后续删除掉父节点的删除按钮【存在逻辑是SelectedType是branchCompany时取反parentValue,树形节点的唯一性问题】

      // 回显禁用节点 checkboxId 禁用节点value数组
      reShowDisabled(list, checkboxId) {this.disabledParentList = [];const disabledObj = (list) => {list.forEach((v) => {if (checkboxId.findIndex((val) => val === v.value) !== -1) {this.$set(v, 'disabled', true);this.setdisabledParentList(v);// console.log('禁用', v);}if (v.children) {disabledObj(v.children);}});};disabledObj(list);
      }
    • 调用getParentValueList()函数,去掉父节点的删除按钮

      • 利用闭包写递归函数,在树节点中找到value在disabledParentList中的节点,为它设置ifShow为true的属性,实现父节点删除按钮的去掉

      // 获取需要隐藏删除按钮的所有父节点,设置ifShow属性
      getParentValueList() {const ifShowObj = (list) => {list.forEach((v) => {if (this.disabledParentList.findIndex((val) => val === v.value) !== -1) {this.$set(v, 'ifShow', true);}if (v.children) {ifShowObj(v.children);}});};ifShowObj(this.dataTree);
      }
    • 初始化完成

  3. 对左边树形数据进行勾选和取消勾选,都会触发树的change事件,调用getCheckedNodes()函数,逻辑如上

    // 选择数据 -> 展示 el-tree回调
    getCheckedNodes() {const checkedList = this.$refs.tree.getCheckedNodes(false, true);this.isSelectedData = this.depthTraversal(JSON.parse(JSON.stringify(this.dataTree)), checkedList);
    }
  4. 对右边已选框的数据点击删除按钮进行删除,调用remove()函数,调用el-tree的setChecked()方法,取消对对应节点的勾选,然后再次调用getCheckedNodes()函数

    // delete 右边移除选中的数据
    remove(node, data) {this.$refs.tree.setChecked(data.value, false, true);this.getCheckedNodes();
    }
  5. 点击清空已选按钮,调用empty()函数,在dataTree中过滤出除了禁用节点(oldDisabledArr/disabledArr)以外的节点,通过el-tree的setChecked()方法设置节点为取消勾选

    //点击清空时清空所有人员跟人员id
    empty() {// 过滤出除了所有外的数据,取消勾选const aa = this.dataTree.filter((item) => this.oldDisabledArr.findIndex((val) => val.value === item.value) === -1);aa.map((item) => this.$refs.tree.setChecked(item.value, false, true));this.checkAll = false;
    }
  6. 点击全选或反选按钮,调用handleCheckAllChange()函数,也是在dataTree中过滤出除了禁用节点(oldDisabledArr/disabledArr)以外的节点:

    • 若是全选,则用setChecked()方法设置节点为勾选

    • 若是反选,则用setChecked()方法设置节点为取消勾选

    // 全选反选
    handleCheckAllChange() {console.log('checkAll', this.checkAll);const aa = this.dataTree.filter((item) => this.oldDisabledArr.findIndex((val) => val.value === item.value) === -1);if (this.checkAll) {console.log('全选');aa.map((item) => this.$refs.tree.setChecked(item.value, true, true));} else {console.log('反选');console.log(this.disabledArr);aa.map((item) => this.$refs.tree.setChecked(item.value, false, true));}
    }
  7. 点击确定按钮,调用surePromoter()方法,校验通过后,通过getCheckedNodes()方法得到目前所有被选择的节点赋值给resultSelectedData:

    • 若是上传文件,则通过$emit传给父组件对应的radio类型和resultSelectedData

    • 若是编辑,则通过$emit传给父组件SelectedType和resultSelectedData

    然后关闭选择范围弹框

    surePromoter() {if (this.isSelectedData.length === 0) {this.$message({message: '请选择成员!',type: 'warning'});return;}
    ​// 提交的listconst resultSelectedData = this.$refs.tree.getCheckedNodes(false, false);// clientOrganization 机构项目组   organization 事业部   branchCompany 合约归属公司
    ​if (this.oldDisabledArr.length === 0) {// 上传文件if (this.searchRange === 1) {this.$emit('getOrgList', 'clientOrganization', resultSelectedData, this.checkAll);} else if (this.searchRange === 2) {this.$emit('getOrgList', 'organization', resultSelectedData, this.checkAll);} else if (this.searchRange === 3) {this.$emit('getOrgList', 'branchCompany', resultSelectedData, this.checkAll);}} else {//编辑this.$emit('getOrgList', this.SelectedType, resultSelectedData, this.checkAll);}
    ​this.dialogVisible = false;
    }

还存在的问题:

1. 全选反选按钮是否勾选问题,已解决

2. 树形节点全选反选的速度较慢,待改进 

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

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

相关文章

晶方科技:台积电吃饱,封装迎春?

半导体产业链掀起涨价潮&#xff0c;先进封装迎接利好。 这里我们来聊国内先进封装企业——晶方科技。 近期&#xff0c;由于产能供不应求&#xff0c;台积电决定上调先进封装产品价格&#xff0c;还表示订单已经排到2026年。 大哥吃不下了&#xff0c;剩下的订单全都是空间。…

Shell编程规范与变量-01

一、Shell脚本概述 在一些复杂的 Linux 维护工作中&#xff0c;大量重复性的输入和交互操作不仅费时费力&#xff0c;而且容易出错&#xff0c;而编写一个恰到好处的 Shell 脚本程序&#xff0c;可以批量处理、自动化地完成一系列维护任务&#xff0c;大大减轻管理员的负担。 1…

在Ubuntu上安装Python3

安装 python3 pip sudo apt -y install python3 python3-pip升级 pip python3 -m pip install --upgrade pip验证查看版本 python3 --version

web渗透-SSRF漏洞及discuz论坛网站测试

一、简介 ssrf(server-side request forgery:服务器端请求伪造&#xff09;是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下&#xff0c;ssrf是要目标网站的内部系统。(因为他是从内部系统访问的&#xff0c;所有可以通过它攻击外网无法访问的内部系统&…

excel字符串列的文本合并

excel表有两列&#xff0c;第一列是“姓名”&#xff0c;第二列是“诊断”&#xff0c;有高血压、糖尿病等。我想出一个统计表&#xff0c;统计“姓名”&#xff0c;把某一个姓名的诊断不重复的用、拼接起来&#xff0c;比如“张三”的诊断为“点高血压”、糖尿病。我们可以用T…

适用于轨道交通专用的板卡式网管型工业以太网交换机

是网管型 CompactPCI板卡式冗余环网交换机。前面板带有6个 10/100/1000Base-T(X)M12接口。后面的CPCI接口有 8个10/100/1000Base-T (X) 以太网接口。 是特别为轨道交通行业EN50155标准要求而设计的坚固型交换机。它同时具有以下特性&#xff1a; ● 支持2线以太网距离扩展端口&…

springcloud第4季 springcloud-alibaba之nacos+openfegin+gateway+sentinel熔断限流【经典案例】

一 说明 1.1 架构说明 本案例实现原理&#xff1a; 采用alibaba的nacos&#xff0c;openfegin&#xff0c;sentinel&#xff0c;gateway等组件实现熔断限流。 主要理解sentinel的ResouceSentinel和fallback的区别联系。 ResourceSentinel 主要是页面配置熔断限流规则&#…

试析C#编程语言的特点及功能

行步骤&#xff0c;而不必创建新方法。其声明方法是在实例化委托基础上&#xff0c;加一对花括号以代表执行范围&#xff0c;再加一个分号终止语句。 2.3.3 工作原理 C#编译器在“匿名”委托时会自动把执行代码转换成惟一命名类里的惟一命名函数。再对存储代码块的委托进行设…

【干货】Vue3 组件通信方式详解

前言 毫无疑问&#xff0c;组件通信是Vue中非常重要的技术之一&#xff0c;它的出现能够使我们非常方便的在不同组件之间进行数据的传递&#xff0c;以达到数据交互的效果。所以&#xff0c;学习组件通信技术是非常有必要的&#xff0c;本文将总结Vue中关于组件通信的八种方式…

【博士每天一篇文献-算法】Fearnet Brain-inspired model for incremental learning

阅读时间&#xff1a;2023-12-16 1 介绍 年份&#xff1a;2017 作者&#xff1a;Ronald Kemker&#xff0c;美国太空部队&#xff1b;Christopher Kanan&#xff0c;罗切斯特大学 期刊&#xff1a; arXiv preprint 引用量&#xff1a;520 Kemker R, Kanan C. Fearnet: Brain-…

宠物领养救助管理系带万字文档java项目基于springboot+vue的宠物管理系统java课程设计java毕业设计

文章目录 宠物领养救助管理系统一、项目演示二、项目介绍三、万字项目文档四、部分功能截图五、部分代码展示六、底部获取项目源码带万字文档&#xff08;9.9&#xffe5;带走&#xff09; 宠物领养救助管理系统 一、项目演示 宠物领养救助系统 二、项目介绍 基于springbootv…

WEB与低代码:B/S架构在开发中的应用与优势

在互联网迅猛发展的今天&#xff0c;WEB应用已经成为人们日常生活和工作中不可或缺的一部分。随着技术的进步和需求的多样化&#xff0c;开发高效、灵活且易于维护的WEB应用变得尤为重要。B/S架构&#xff08;Browser/Server Architecture&#xff09;作为一种常见的WEB应用架构…

Chatopera 云服务实现类海尔服务智能客服的功能点比较 | Chatopera

在上一篇文章中&#xff0c;我分享了《智能客服体验分析&#xff0c;使用小程序海尔服务完成电器报修》。如果使用 Chatopera 云服务实现一个类似的应用&#xff0c;如何做呢&#xff1f;借助 Chatopera 云服务 可以实现一个智能客服&#xff0c;那么和现在的海尔服务小程序会有…

WordPress软件下载主题Inpandora

Inpandora&#xff08;中文名为潘多拉&#xff09;是一款基于软件下载站定制的WordPress主题&#xff0c;帮助站长使用WordPress快速搭建一个专业的WordPress软件博客。Inpandora这款WordPress主题可以说是因软件而生&#xff0c;从UI设计到后台设置功能&#xff0c;都充分体现…

云计算运维工程师的突发状况处理

云计算运维工程师在应对突发的故障和紧急情况时,需要采取一系列迅速而有效的措施来最小化服务中断的时间并恢复系统的稳定性。 以下是一些关键步骤和策略: 快速响应: 立即识别并确认故障的性质和范围。通知团队成员和相关的利益相关者,确保所有人了解当前情况。故障诊断:…

MD5加密接口

签名算法 app_key和app_secret由对方系统提供 MD5_CALCULATE_HASH_FOR_CHAR&#xff08;中文加密与JAVA不一致&#xff09; 代码&#xff1a; *获取传输字段名的ASCII码&#xff0c;根据ASCII码对字段名进行排序SELECT * FROM zthr0051WHERE functionid iv_functionidINTO …

想布局短视频赛道,云微客AI矩阵系统告诉你诀窍

随着人工智能技术的不断发展&#xff0c;越来越多的企业和个人创作者开始意识到智能化的重要性。而现阶段&#xff0c;随着短视频市场的膨胀扩大&#xff0c;批量成片、智能创作、定时发布是当下重要的趋势&#xff0c;企业如果想在短视频赛道分一杯羹&#xff0c;智能化的平台…

首次30米空间分辨率生成中国年度耕地栅格数据1986-2021

中国1986-2021年30米分辨率年度耕地数据集 数据介绍 精确、详细且及时的耕地范围信息对于粮食安全保障和环境可持续性至关重要。然而&#xff0c;由于农业景观的复杂性和足够训练样本的缺乏&#xff0c;在大范围下进行高时空分辨率的耕地动态监测仍然具有挑战性&#xff0c;尤其…

kafka进阶核心原理详解:案例解析(第11天)

系列文章目录 kafka高级&#xff08;重点&#xff09; kafka核心概念汇总 kafka的数据位移offset Kafka的基准/压力测试 Kafka的分片副本机制 kafka如何保证数据不丢失 kafka的消息存储及查询机制 生产者数据分发策略 消费者负载均衡机制 kafka的监控工具:kafka-eagle…

台灯学生用哪个牌子最好?五款学生专用台灯大全分享

随着科技的持续进步&#xff0c;电子产品无疑为我们的生活带来了极大的便利&#xff0c;同时也暗藏了不少隐患。其中最令广大家长忧心的便是孩子视力的健康&#xff0c;他们从小就面临着手机和电视等屏幕对孩子视力的潜在威胁。为了应对这一问题&#xff0c;家长们不遗余力地寻…