vue+elementUI实现级联表格el-table级联多选

news2024/11/26 10:39:27

vue+elementUI实现级联表格el-table级联多选

在这里插入图片描述

<template>
  <div id="app">
    <el-button type="primary" @click="getAllSelect()">获取选中集合</el-button>
    <el-table
      :data="renderDynamic"
      ref="lendontable"
      border
      default-expand-all
      row-key="id"
      :row-class-name="rowClassNameFun"
      :header-row-class-name="headerRowClassName"
      size="mini"
      max-height="500px"
      style="width: 100%"
      @select="selectFun"
      @select-all="selectAllFun"
      :header-cell-style="{ background: '#fafafa' }"
    >
      <el-table-column type="selection" width="55" :selectable="selectable">
      </el-table-column>
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
      renderDynamic: [
        {
          id: 1,
          parentId: 0,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          parentId: 0,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [
            {
              id: 3,
              parentId: 2,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [
                {
                  id: 4,
                  parentId: 3,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                  id: 5,
                  parentId: 3,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
                }
              ]
            },
            {
              id: 6,
              parentId: 2,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        },
        {
          id: 11,
          parentId: 0,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [
            {
              id: 1101,
              parentId: 11,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            },
            {
              id: 1102,
              parentId: 11,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        }
      ],
      selectArr: []
    };
  },
  mounted() {
    this.initData(this.renderDynamic);
  },
  methods: {
    getAllSelect() {
      this.selectArr = [];
      this.getSelectId(this.renderDynamic);
      console.log('-----选中节点id集合----', this.selectArr);
    },
    getSelectId(data) {
      data.forEach((item) => {
        if (item.isSelect === true) {
          //父级选中，只获取父级的值
          this.selectArr.push(item.id);
          // 父级选中，获取父级和子级的值，只获取父级的值，将下面代码注释
          if (item.children && item.children.length) {
            this.getSelectId(item.children);
          }
        } else if (item.isSelect === '') {
          this.getSelectId(item.children);
        }
      });
    },
    //设计禁止选中
    selectable(row) {
      return row.parentId != 11 && row.id != 11;
    },
    initData(data) {
      data.forEach((item) => {
        item.isSelect = false; //默认为不选中
        if (item.children && item.children.length) {
          this.initData(item.children);
        }
      });
    },
    selectFun(selection, row) {
      this.setRowIsSelect(row);
    },
    checkIsAllSelect() {
      this.oneProductIsSelect = [];
      this.renderDynamic.forEach((item) => {
        this.oneProductIsSelect.push(item.isSelect);
      });
      //判断一级产品是否是全选.如果一级产品全为true，则设置为取消全选，否则全选
      let isAllSelect = this.oneProductIsSelect.every((selectStatusItem) => {
        return true == selectStatusItem;
      });
      return isAllSelect;
    },
    selectAllFun(selection) {
      // this.renderDynamic.forEach((item) => {
      //   this.$refs.lendontable.toggleRowSelection(item, !item.isSelect);
      //   this.selectFun(selection, item);
      // });

      //设置禁止选中时，取消禁止的选中状态
      this.renderDynamic.forEach((item) => {
        if (item.id === 11) {
          this.$refs.lendontable.toggleRowSelection(item, false);
        } else {
          this.$refs.lendontable.toggleRowSelection(item, !item.isSelect);
          this.selectFun(selection, item);
        }
      });
    },
    rowClassNameFun({ row }) {
      if (row.isSelect === '') {
        return 'indeterminate';
      }
    },
    headerRowClassName({ row }) {
      console.log('row: ', row);
      let oneProductIsSelect = [];
      this.renderDynamic.forEach((item) => {
        oneProductIsSelect.push(item.isSelect);
      });
      if (oneProductIsSelect.includes('')) {
        return 'indeterminate';
      }
      return '';
    },
    setRowIsSelect(row) {
      //当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果
      if (row.isSelect === '') {
        row.isSelect = false;
        this.$refs.lendontable.toggleRowSelection(row, true);
      }
      row.isSelect = !row.isSelect;
      let that = this;

      function selectAllChildrens(data) {
        data.forEach((item) => {
          item.isSelect = row.isSelect;
          that.$refs.lendontable.toggleRowSelection(item, row.isSelect);
          if (item.children && item.children.length) {
            selectAllChildrens(item.children);
          }
        });
      }

      function getSelectStatus(selectStatuaArr, data) {
        data.forEach((childrenItem) => {
          selectStatuaArr.push(childrenItem.isSelect);
          if (childrenItem.children && childrenItem.children.length) {
            getSelectStatus(selectStatuaArr, childrenItem.children);
          }
        });
        return selectStatuaArr;
      }
      function getLevelStatus(row) {
        //如果当前节点的parantId =0 并且有子节点，则为1
        //如果当前节点的parantId !=0 并且子节点没有子节点 则为3
        if (row.parentId == 0) {
          if (row.children && row.children.length) {
            return 1;
          } else {
            return 4;
          }
        } else {
          if (!row.children || !row.children.length) {
            return 3;
          } else {
            return 2;
          }
        }
      }
      let result = {};
      //获取明确的节点
      function getExplicitNode(data, parentId) {
        data.forEach((item) => {
          if (item.id == parentId) {
            result = item;
          }
          if (item.children && item.children.length) {
            getExplicitNode(item.children, parentId);
          }
        });
        return result;
      }
      function operateLastLeve(row) {
        //操作的是子节点  1、获取父节点  2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态
        let selectStatuaArr = [];
        let item = getExplicitNode(that.renderDynamic, row.parentId);
        selectStatuaArr = getSelectStatus(selectStatuaArr, item.children);
        if (
          selectStatuaArr.every((selectItem) => {
            return true == selectItem;
          })
        ) {
          item.isSelect = true;
          that.$refs.lendontable.toggleRowSelection(item, true);
        } else if (
          selectStatuaArr.every((selectItem) => {
            return false == selectItem;
          })
        ) {
          item.isSelect = false;
          that.$refs.lendontable.toggleRowSelection(item, false);
        } else {
          item.isSelect = '';
        }
        //则还有父级
        if (item.parentId != 0) {
          operateLastLeve(item);
        }
      }
      //判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选

      //1、只是父级 2、既是子集，又是父级 3、只是子级
      let levelSataus = getLevelStatus(row);
      if (levelSataus == 1) {
        selectAllChildrens(row.children);
      } else if (levelSataus == 2) {
        selectAllChildrens(row.children);
        operateLastLeve(row);
      } else if (levelSataus == 3) {
        operateLastLeve(row);
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.indeterminate .el-checkbox__input .el-checkbox__inner {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}

.indeterminate .el-checkbox__input.is-checked .el-checkbox__inner::after {
  transform: scale(0.5);
}

.indeterminate .el-checkbox__input .el-checkbox__inner {
  background-color: #f2f6fc;
  border-color: #dcdfe6;
}
.indeterminate .el-checkbox__input .el-checkbox__inner::after {
  border-color: #c0c4cc !important;
  background-color: #c0c4cc;
}
.product-show th .el-checkbox__inner {
  display: none !important;
}

.indeterminate .el-checkbox__input .el-checkbox__inner::after {
  content: '';
  position: absolute;
  display: block;
  background-color: #fff;
  height: 2px;
  transform: scale(0.5);
  left: 0;
  right: 0;
  top: 5px;
  width: auto !important;
}
.product-show .el-checkbox__inner {
  display: block !important;
}

.product-show .el-checkbox {
  display: block !important;
}
</style>

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

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

相关文章

DataFun: 微信NLP算法微服务治理

DataFun: 微信NLP算法微服务治理

管理问题 性能问题 PyInter&#xff1a;暂未开源&#xff0c;有开源打算 调度问题 P50&#xff1a; 响应的中位数P999&#xff1a;耗时最慢的千分之一 让p999下降为p50的1.5倍
阅读更多...
DIY正则图片下载工具

DIY正则图片下载工具

一、初心&#xff1a;如果您擅长正则表达式&#xff0c;可以自定义抓取自定义网页的图片。 二、效果&#xff1a; 目前支持 <img>标签抓取图片正则。更多正则欢迎分项。支持base64图片预览。 三、使用方法&#xff1a; 修改正则表达式&#xff1a;选中即可。同时工具几…
阅读更多...
Springboot毕业设计毕设作品,纯净水销售配送管理系统设计与实现

Springboot毕业设计毕设作品,纯净水销售配送管理系统设计与实现

功能清单 在系统里面我们将纯净水的产品统称为商品 【后台管理员功能】 广告管理&#xff1a;设置小程序首页轮播图广告和链接 留言列表&#xff1a;所有用户留言信息列表&#xff0c;支持删除 会员列表&#xff1a;查看所有注册会员信息&#xff0c;支持删除 资讯分类&#…
阅读更多...
基于Abaqus-Simpack联合仿真车辆-浮置板轨道耦合动力学仿真

基于Abaqus-Simpack联合仿真车辆-浮置板轨道耦合动力学仿真

作者&#xff1a; CAE兮枫如秋 仿真秀专栏作者 一、城市轨道交通中钢弹簧浮置板高级减振轨道 城市轨道交通不仅作为城市亮丽的名片&#xff0c;还在解决城市交通问题中具有特殊的地位和作用。城市轨道交通也是一种安全、快捷、准时、方便、舒适的理想交通工具。伴随着全世界各…
阅读更多...
【MM小贴士】SAP创建成本中心采购订单带出默认会计科目和成本中心

【MM小贴士】SAP创建成本中心采购订单带出默认会计科目和成本中心

在实施SAP项目梳理MM模块业务需求的时候&#xff0c;很多公司都会有这样需求&#xff0c;就是在创建成本中心采购订单的时候&#xff0c;因为成本中心和会计科目是必须输的&#xff0c;所以用户希望系统能够自动带出默认的会计科目和成本中心&#xff08;如下图&#xff09;。 …
阅读更多...
14.前端笔记-CSS-浮动

14.前端笔记-CSS-浮动

1、传统网页布局的三种方式 网页布局的本质&#xff1a;用CSS摆放盒子 传统布局方式&#xff1a; - 普通流&#xff08;标准流&#xff09;- 浮动- 定位1.1 普通流&#xff08;文档流/标准流&#xff09; 就是标签按照规定好默认方式排列 &#xff08;1&#xff09;块级元素独…
阅读更多...
项目前的知识回顾

项目前的知识回顾

杂谈 什么是框架 应用方面&#xff1a;框架是整个或者部分系统的可重用设计 目的方面&#xff1a;框架是可被开发者定制的应用骨架 统一的舞台&#xff0c;不同人表演不同的节目 框架解决什么问题 框架主要解决技术整合的问题 MYBATIS 什么是Mybatis Mybatis是一款半自动…
阅读更多...
Ubuntu20.4安装QT6

Ubuntu20.4安装QT6

前言&#xff1a; 本教程基于Ubuntu20.4&#xff0c;在Ubuntu22.4上也测试过。Ubuntu18.04由于GCC版本太低&#xff0c;无法正常工作。 1.下载QT安装程序&#xff1a; Open Source Development | Open Source License | Qt 2.安装libxcb-xinerama(必须在执行QT安装程序前执行…
阅读更多...
多智能体（机器人）任务分配问题求解AssignmentProblem

多智能体（机器人）任务分配问题求解AssignmentProblem

问题提出&#xff1a; N个智能体&#xff0c;现在有个任务&#xff0c;就是让N个智能体要到N个目标位置&#xff0c;目标位置不能重复&#xff0c;目标位置与机器人一一对应&#xff0c;要使得期间所有所走的距离之和最短&#xff0c;求解最优任务分配。 问题抽象&#xff1a; …
阅读更多...
关联分析——apprior算法

关联分析——apprior算法

1.txt文件的打开与关闭 2.list的操作 3.字典的创建及保存 4.txt文件的创建与写入 输入&#xff1a; 结果&#xff1a; import os#input min_sup4 max_item[] data [] transaction[]curent_transaction,current_sup[],[] result_transaction,result_sup[],[]#Storage resul…
阅读更多...
线索二叉树操作详解（详细图例+cpp实现+源码）

线索二叉树操作详解（详细图例+cpp实现+源码）

文章目录线索二叉树中序线索二叉树构造线索二叉树节点的线索化其他操作销毁二叉搜索树获取中序遍历的第一个节点获取中序遍历的最后一个节点输出中序遍历序列逆序输出中序遍历序列源码线索二叉树 线索二叉树又称为二叉树的线索化。 在一个具有n个节点的二叉树中&#xff0c;它…
阅读更多...
Linux零基础入门（一）初识Linux

Linux零基础入门（一）初识Linux

Linux零基础入门&#xff08;一&#xff09;初识Linux前言操作系统概述一 操作系统概述1 硬件和软件2 操作系统二 初识Linux1 Linux的诞生2 Linux内核3 Linux发行版三 虚拟机介绍1 虚拟机四 VMware WorkStation安装1 虚拟化软件五 在VMware上安装Linux1 下载CentOS操作系统六 远…
阅读更多...
[附源码]计算机毕业设计springboot体育馆场地预约管理系统

[附源码]计算机毕业设计springboot体育馆场地预约管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
SwiftUI 如何快速识别视图（View）界面的刷新是由哪个状态的改变导致的？

SwiftUI 如何快速识别视图（View）界面的刷新是由哪个状态的改变导致的？

功能需求 在 SwiftUI 中，我们视图的界面可能在不经意间被意外刷新了。这时，我们希望知道是该视图中的哪个状态导致了刷新。在包含众多状态的复杂视图中，这往往很难实现。 如上图所示，当我们随机改变视图中的状态时，可以在调试控制台中轻松看到是哪个状态导致了视图的刷新…
阅读更多...
什么样的跨网数据摆渡系统，能够减少数据泄密的风险？

什么样的跨网数据摆渡系统，能够减少数据泄密的风险？

企业在公司正常运行下难免会产生一些重要数据或者敏感数据&#xff0c;这些都是企业在发展过程中积累下来的重要数据资产&#xff0c;对企业的发展至关重要。这些数据资产往往关联着企业的核心数据&#xff0c;一旦面临泄露&#xff0c;不仅仅会影响企业发展&#xff0c;甚至会…
阅读更多...
词法分析（编译原理不用慌）

词法分析（编译原理不用慌）

目录 一.简单版 二.简单版&#xff08;文本保存&#xff09; c版 运行结果&#xff1a; Java版 运行结果&#xff1a; 三.第三版&#xff08;文本保存&#xff09; c版 运行结果&#xff1a; 一.简单版 #include<stdio.h> #include<iostream> using namesp…
阅读更多...
独立站SaaS系统站群模式怎么玩

独立站SaaS系统站群模式怎么玩

做独立站的人都知道“站群”这个游戏&#xff0c;意思是通过建站工具一次性建好几百个或者几千个独立站。各个独立站卖的品类比较垂直&#xff0c;不会有太多SKU。销量好的站会留着精细化运营&#xff0c;没流量的就放弃。 使用脸书或谷歌和其他广告渠道来测试产品。每个产品…
阅读更多...
Unity3d bounds包围盒 和collider碰撞器区别

Unity3d bounds包围盒 和collider碰撞器区别

Bounds 外包围盒 Bounds 叫作外包围盒、边界框、外扩矩形.是struct 结构体。而我们获得Bounds的主要途径有三种&#xff1a;Render,Collider,Mesh。 Render.bounds 世界坐标 Collider.bounds 世界坐标 Mesh.bounds 本地坐标 var m GetComponent<MeshFilter>().bound…
阅读更多...
抖音用户浏览行为数据分析与挖掘

抖音用户浏览行为数据分析与挖掘

下文部分代码省略&#xff0c;完整项目代码及数据集链接&#xff1a;抖音用户浏览行为数据分析与挖掘 目录1.特征指标构建0. 项目介绍与说明**数据集说明**浏览行为1. 数据简单处理2. 特征指标构建用户指标分析&#xff1a;作者指标分析&#xff1a;作品指标分析&#xff1a;3.…
阅读更多...
5分钟快速上手Nmap指令（基于Kali系统）

5分钟快速上手Nmap指令（基于Kali系统）

前言正文1、修改Kali系统中网络配置2、Nmap简介2.1 用途2.2优势2.3 相关知识3、Nmap中最常用的命令3.1 单主机扫描3.2 多目标扫描3.3 检测目标主机漏洞3.3 时序选择3.4 保存4、kali系统中常见报错参考文献前言 本篇为理论篇&#xff0c;主要为CTF攻防做铺垫&#xff0c;围绕 基…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023