首页 > 其他分享 >el-table树形数据勾选框子父级联

el-table树形数据勾选框子父级联

时间:2023-05-04 10:00:18浏览次数:31  
标签:el 子父 refs item state table children select

element官网并没有配置树形数据勾选子父级联的配置,要想实现可以借助 select 、select-all事件和 toggleRowSelection 方法实现。
image
image

select 事件:

点击查看代码
onCheck(selection, row) {
      if (!this.isTreeData) return
      let state = row.select ? false : true
      row.select = state
      this.$refs.table.toggleRowSelection(row, state)
      const setNodeState = (data, state) => {
        data.forEach((item) => {
          item.select = state
          this.$refs.table.toggleRowSelection(item, state)
          item.children && setNodeState(item.children)
        })
      }
      row.children && setNodeState(row.children, state)
      this.$emit('tree-select', this.$refs.table.store.states.selection)
    },

select-all 事件:

点击查看代码
onCheckAll(selection) {
      let state = this.$refs.table.store.states.isAllSelected
      if (!this.isTreeData) return
      const setChecked = (data) => {
        data.forEach((item) => {
          item.select = state
          this.$refs.table.toggleRowSelection(item, state)
          item.children && setChecked(item.children)
        })
      }
      setChecked(this.data)
      this.$emit('tree-select', this.$refs.table.store.states.selection)
    },

全选事件也可以在递归获取是否有勾选的项来判断是要全选还是全不选,有点麻烦,这里直接借助了 this.$refs.table.store.states.isAllSelected 的状态设置。

标签:el,子父,refs,item,state,table,children,select
From: https://www.cnblogs.com/baixi1271/p/17370209.html

相关文章

  • element ui selectableRange 不生效,另一种方式实现时间选择范围限制
    selectableRange不生效可能是以为element版本问题,有条件的可以先升级elementui版本试试。使用picker-options实现时间选择范围限制直接上代码:<el-date-pickerv-if="viewer===''||viewer==='creator'||subTaskInfo.status!==2"v-model=......
  • 简单的string_builder和string_table
    一、有些时候需要逐步构建一个字符串,需要用到类似其它语言中的StringBuilder的组件。有必要自己写一个把它搞清楚。string_builder有两个基本操作。一个是push操作,向末尾追加一个字符,若空间不够就自动额外申请。一个是获取string操作,拿到最终的串,串以空字符结尾。其它格式化的功......
  • Flask中使用Celery教程
    不管是使用什么编程语言,使用什么框架。在服务器上执行耗时操作,比如网络请求、视频转码、图片处理等。如果想实现快速响应客户端的需求,则必须使用任务队列。任务队列是一个单独的程序,和网站没有直接关系,任务队列提供了接口,能在网站中通过代码操作任务队列,比如:添加任务,查看任务结......
  • 一个excel文件中用不同密码实现打开不同表格
    一个excel文件中用不同密码实现打开不同表格ALT+F11打开VBAProjectCTRL+R找到ThisWorkBook双击打开粘贴如下代码PrivateSubWorkbook_BeforeClose(CancelAsBoolean)Dimy,arrarr=Sheets("权限管理").Range("A1").CurrentRegionFory=2ToUBound(arr,2)Sheets(a......
  • Windows环境安装Elasticsearch和Kibana
    目录1Elasticsearch1.1下载1.2解压并添加环境变量1.3访问1.4cmd命令1.5中文分词器1.5.1下载1.5.2安装1.5.2.1命令安装1.5.2.2手动安装1.5.2.3验证分词1.6使用curl批量导入2安装kibana2.1下载kibana2.2中文界面2.3操作索引2.3.1增加索引2.3.1.1单条新增2.3.1.2......
  • Linux shell command make All In One
    LinuxshellcommandmakeAllInOneGNUMake$make-vGNUMake4.3为aarch64-unknown-linux-gnu编译Copyright(C)1988-2020FreeSoftwareFoundation,Inc.许可证:GPLv3+:GNU通用公共许可证第3版或更新版本<http://gnu.org/licenses/gpl.html>。本软件是自由软件......
  • 关于AWS-ElastiCache-的Reserved_Cache_Nodes-预留节点-是没有多可用区的概念的
    今天在整理完善一个关于所有AWS账号的ElastiCache-的RN信息表格时,发现有一个字段要求写是否是多可用区笔者之前还没有注意过关于ElastiCache的RN的多可用区的问题,不过,像RDS确实有这个概念于是笔者去ElastiCache的 Purchasereservednodes界面又再次确认了一下,确实没有多可用......
  • KubeVela 稳定性及可扩展性评估
    作者:殷达背景随着v1.8的发布,基于OAM的应用程序交付项目KubeVela已经持续发展了3年多。目前已被各种组织采用并部署在生产环境中。无论是与托管定义一起使用还是在多个集群上进行管理,在单个KubeVela控制平面上运行数千个应用程序的情况并不少见。用户经常问的一个关键......
  • AI 作画火了,如何用 Serverless 函数计算部署 Stable Diffusion?
    作者:寒斜立即体验基于函数计算部署StableDiffusion:https://developer.aliyun.com/topic/aigcAIGC领域目前大火,除了Chatgpt,在文生图领域StableDiffusion大放异彩,深刻的地影响着绘画、视频制作等相关领域。利用这项技术,普通人也可以制作出令人惊叹的艺术作品。今天我们将......
  • 关于如何使用pandas将不同的数据写入到同一个Excel的不同Sheet表中
    笔者在之前使用python将数据写入到Excel表格中,一般都只需要写入一张Sheet表中就可以了因最近一个小的需求,需要将不同的大列表数据写入到不同的Sheet表中这样,再使用之前的pandas.DataFrame(content_list),然后.to_excel("./xxxxx.xlsx")就不再好用了于是笔者又去看了一个pandas......