vue3+element-plus table 实现树状结构数据递归向上选择

半夜燃烧的香烟

已于 2024-02-04 11:39:52 修改

阅读量567

点赞数 1

文章标签： vue.js 前端 javascript

于 2024-02-02 10:34:34 首次发布

本文链接：https://blog.csdn.net/weixin_43828003/article/details/135988381

版权

文章讲述了如何在ElementPlus的表格组件中，当用户选择子级时，同时选中其父级，通过JavaScript处理`el-table`的父子级关系，以及相关的方法如`handleSelectionMenuChange`，`getParent`和`checkMenu`的实现原理。

摘要由CSDN通过智能技术生成

效果如下

element-plus默认只允许选择父级默认选中子级，选中子级不会选中父级，需要自己处理

代码

HTML部分

 <el-table
    :data="moduleInfo"
    row-key="id"
    border
    default-expand-all
    class="table-style"
    ref="moduleTableRef"
    @select="handleSelectionMenuChange"
    >
       <el-table-column type="selection" width="55" />
       <el-table-column prop="menuName" label="菜单名称" />
       <el-table-column prop="menuType" label="类型"></el-table-column>
   </el-table>

js向上寻找并保存已选中id部分

//获取点击权限数据父级数据
const handleSelectionMenuChange = (selection: Array<TreeCompanyVO>, row: TreeCompanyVO) => {
  //保存选中的数据id
  const checkIds = new Array()
  //获取选中行id
  selection.forEach((item) => {
    checkIds.push(item.id)
  })
  getParent(row.parentId, checkIds, moduleInfo)
  checkMenu(checkIds,moduleInfo)
}
/**
 * 获取选中行的父级id
 * @param checkParentId 选中行父id
 * @param checkIds 保存选中行数组
 */
const getParent = (
  checkParentId: string,
  checkIds: Array<string>,
  moduleInfos: Array<CompanyMenuVO>
) => {
  moduleInfos.forEach((item) => {
    if (item.id == checkParentId) {
      checkIds.push(item.id)
      getParent(item.parentId, checkIds, moduleInfo)
    } else {
      if (item.children && item.children.length > 0) {
        getParent(checkParentId, checkIds, item.children)
      }
    }
  })
}

/**
 * 选中之前已绑定权限
 * @param checkMenuId 已绑定权限id
 * @param moduleList 模块集合
 */
const checkMenu = (checkMenuId: Array<string>, moduleList: Array<CompanyMenuVO>) => {
  moduleList.forEach((item) => {
    if (checkMenuId.includes(item.id)) {
      moduleTableRef.value.toggleRowSelection(item, true)
    } else {
      moduleTableRef.value.toggleRowSelection(item, false)
    }
    if (item.children && item.children.length > 0) {
      checkMenu(checkMenuId, item.children)
    }
  })
}