elementplus-tree权限树

<template>
  <div>
    <el-tree></el-tree>
    <el-tree ref="treeRefs" show-checkbox default-expand-all :data="treeData" :expand-on-click-node="false"
      style="max-width:600px;margin-top:10px;" :default-checked-keys="origincheckedkey" @check="handleNodecheck"
      node-key="id" :props="defauleProps" />
  </div>

</template>
<script setup lang='ts'>
import { reactive, ref, onMounted } from 'vue'
const treeRefs: any = ref(null);
const origincheckedkey: any = ref([])//初始选中数据
const treeData: any = ref([])
const realcheckedKey: any = ref([])

onMounted(() => {
  gitListData()
})
const gitListData = () => {
  const tree = {
    paperConfig: [
      {
        id: 3,
        parentId: 0,
        weight: 0,
        name: '成果调研',
        checked: true
      }, {
        id: 4,
        parentId: 0,
        weight: 0,
        name: '论文研读',
        checked: true,
        children: [
          {
            id: 6,
            parentId: 4,
            weight: 0,
            name: '多文档对比',
            checked: true,
          }, {
            id: 7,
            parentId: 4,
            weight: 0,
            name: '多文档问答',
            checked: true,
          }
        ]
      }, {
        id: 5,
        parentId: 0,
        weight: 0,
        name: '学术写作',
        checked: true,
        children: [
          {
            id: 8,
            parentId: 5,
            weight: 0,
            name: '学术翻译',
            checked: true,
          }, {
            id: 9,
            parentId: 5,
            weight: 0,
            name: '学术润色',
            checked: true,
          }, {
            id: 10,
            parentId: 5,
            weight: 0,
            name: '全文审校',
            checked: true,
          }
        ]
      },
    ],
    saasConfig: [{
      id: 2,
      parentId: 0,
      weight: 0,
      name: '租户管理',
      checked: true
    }, {
      id: 1,
      parentId: 0,
      weight: 1,
      name: '用户管理',
      checked: false
    }, {
      id: 11,
      parentId: 0,
      weight: 2,
      name: '角色管理',
      checked: true
    },],
    intelConfig:
      [{
        id: 12,
        parentId: 0,
        weight: 0,
        name: '主体监测分析',
        checked: false
      }, {
        id: 13,
        parentId: 0,
        weight: 0,
        name: '情报调研',
        checked: true
      }, {
        id: 14,
        parentId: 0,
        weight: 0,
        name: '资料研读',
        checked: true
      }, {
        id: 15,
        parentId: 0,
        weight: 0,
        name: '成果编报',
        checked: true
      },],
  }

  const checked = getcheckedItems(tree)
  origincheckedkey.value = checked
  console.warn('选中数据', checked)

  treeData.value = [
    {
      id: 'all',
      name: '所有功能',
      children: [],
    }
  ]
  if (tree.paperConfig && tree.paperConfig.length > 0) {
    treeData.value[0].children.push({
      name: '科研助手',
      id: 'kyzs',
      children: tree.paperConfig
    })
  }
  if (tree.saasConfig && tree.saasConfig.length > 0) {
    treeData.value[0].children.push({
      name: 'saas后台管理',
      id: 'saas',
      children: tree.saasConfig
    })
  }
  if (tree.intelConfig && tree.intelConfig.length > 0) {
    treeData.value[0].children.push({
      name: '情报管理',
      id: '情报',
      children: tree.intelConfig
    })
  }

  realcheckedKey.value = []
  realcheckedKey.value = getcheckedIds(treeData.value)
}

function getcheckedIds(data) {
  const checkedIds: any = []
  function traverse(items) {
    items.forEach((item: any) => {
      if (item.checked) {
        checkedIds.push(item.id)
      }
      if (item.children) {
        traverse(item.children)
      }
    })
  }
  traverse(data)
  return checkedIds
}

const getcheckedItems = (tree: any) => {
  const result: any = []
  function traverse(node) {
    if (!node?.children && node?.children?.length === 0) {
      if (node.checked) {
        result.push(node.id)
      }
      return node.checked
    }
    let allchildrenchecked = true
    node.children?.forEach((child: any) => {
      const childchecked = traverse(child)
      if (!childchecked) {
        allchildrenchecked = false
      }
    })
    if (node.checked && allchildrenchecked) {
      result.push(node.id)
    }
    return node.checked && allchildrenchecked
  }

  for (const key in tree) {
    tree[key]?.forEach((item: any) => traverse(item))
  }
  return result
}

const handleNodecheck = () => {
  const checkedNodes = treeRefs.value.getCheckedNodes(false, false)
  if (checkedNodes.length === 0) {
    realcheckedKey.value = []
  } else {
    realcheckedKey.value = []
    checkedNodes.forEach((item: any) => {
      realcheckedKey.value.push(item.id)
      if (item.parentId && item.parentId !== 0) {
        realcheckedKey.value.push(item.parentId)
      }
    })
  }
}

const defauleProps = {
  children: 'children',
  label: 'name'
}
</script>
<style lang="less" scoped></style>

后端返回的是一个对象，前端需对对象做处理重新组装为一棵树