当前位置: 首页 > article >正文

完美解决ElementUI中树形结构table勾选问题

完美解决ElementUI中树形结构table勾选问题

  • 实现功能
  • 效果图
    • 全选
    • 取消全选
    • 取消父节点
    • 取消某个子节点
  • 关键代码

实现功能

1. 全选/取消全选,更新所有节点勾选状态
2. 勾选父/子节点,子/父节点状态和全选框状态更新

效果图

全选

在这里插入图片描述

取消全选

在这里插入图片描述

取消父节点

在这里插入图片描述

取消某个子节点

在这里插入图片描述

关键代码

这里是vue2写法,不管什么写法逻辑是一样滴!

<template>
  <el-table
    ref="multipleTable"
    v-loading="loading"
    row-key="id"
    :data="tableList"
    :tree-props="{ children: 'children' }"
    @select-all="selectAll"
    @select="handleSelect"
  >
    <el-table-column type="selection" width="55"> </el-table-column>
  </el-table>
</template>
<script>
export default {
  methods: {
    // 递归设置子节点的勾选状态
    setChildrenSelection(children, selected) {
      if (!children || children.length === 0) return;
      children.forEach((child) => {
        this.$refs.multipleTable.toggleRowSelection(child, selected);
        this.setChildrenSelection(child.children, selected);
      });
    },
    // 更新父节点的勾选状态
    updateParentSelection(node) {
      if (!node || !node.pid) return; // 如果没有父节点,递归终止

      const parent = this.findNodeById(node.pid);
      if (!parent) return; // 如果父节点不存在,退出

      // 检查父节点的所有子节点是否都被勾选
      const allChildrenSelected = parent.children.every((child) =>
        this.$refs.multipleTable.selection.some((item) => item.id === child.id)
      );

      // 根据子节点的勾选状态更新父节点的勾选状态
      this.$refs.multipleTable.toggleRowSelection(parent, allChildrenSelected);

      // 递归更新父节点的父节点
      this.updateParentSelection(parent);
    },
    // 根据 ID 查找节点
    findNodeById(id) {
      const stack = [...this.tableList];
      while (stack.length) {
        const node = stack.pop();
        if (node.id === id) return node;
        if (node.children && node.children.length) {
          stack.push(...node.children);
        }
      }
      return null;
    },
    // 勾选事件处理
    handleSelect(selection, row) {
      if (row.children && row.children.length) {
        // 如果当前节点有子节点,递归设置子节点的勾选状态
        const isCurrentSelected = selection.some((item) => item.id === row.id);
        this.setChildrenSelection(row.children, isCurrentSelected);
      }

      // 更新父节点的勾选状态
      this.updateParentSelection(row);
    },

    // 全选事件处理
    selectAll(selection) {
      this.tableList.forEach((row) => {
        const isRowSelected = selection.some((item) => item.id === row.id);
        this.$refs.multipleTable.toggleRowSelection(row, isRowSelected);

        // 递归设置子节点的勾选状态
        this.setChildrenSelection(row.children, isRowSelected);
      });
    },
  },
};
</script>

// 若想要获取表格选中的数据
const selectedRows = this.$refs.multipleTable.selection;

http://www.kler.cn/a/584697.html

相关文章:

  • 商品管理中的“DeepSeek” AI赋能零售品牌释放利润空间
  • Spring Boot 常用注解的分类及简明解释
  • Spring Boot项目中集成sa-token实现认证授权和OAuth 2.0第三方登录
  • 50.HarmonyOS NEXT 登录模块开发教程(四):状态管理与数据绑定
  • 网络安全工具nc(NetCat)
  • Android7上移植I2C-tools
  • 探索 PyTorch 中的 ConvTranspose2d 及其转置卷积家族
  • SolidWorks中文完整版+教程百度云资源分享
  • 【JavaScript 】1. 什么是 Node.js?(JavaScript 服务器环境)
  • 【Flutter】第一次textEditingController.text获取到空字符串
  • 医院本地化DeepSeek R1对接混合数据库技术实战方案研讨
  • 性能优化:服务器性能影响网站加载速度分析
  • 如何从零编写自己的.NET IoT设备驱动
  • 第54天:Web攻防-SQL注入数据类型参数格式JSONXML编码加密符号闭合复盘报告
  • JVM 详解:Java 虚拟机的核心机制
  • k8s中的控制器的使用
  • DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_06带搜索功能的固定表头表格
  • Linux C++ 编程死锁详解
  • MyBatis一对多查询方式
  • uniapp实现 uview1 u-button的水波纹效果