vue3 element-plus el-tree详解

最近在做后台管理 用到组织树有点多 总结一下

1.单纯组织数的实现（上图）

直接用

<el-tree
     :data="organizationList" //数据-组织数
     node-key="id" //每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
     :current-node-key="1"   //当前选中的节点
     style="--el-color-white"  //样式
     default-expand-all    // 是否全部展开
     @node-click="handleNodeClick"  //组织树的点击事件
      />

声明

<script setup>
import { ref } from 'vue'
import api from './api' //接口地址

const organizationList = ref(null) //声明组织树

// 进页面执行
getOrganizationList()

// 获取组织列表
function getOrganizationList() {
    api.organizationList().then(data => {
        organizationList.value = getName(data)
    })
}

// 数据处理 递归获取名称和数量
function getName(data) {
    return arr.map(v => {
        return {
            label: `${v.name}(${v.num})`,
            name: v.name,
            id: v.id,
            children: v.children?.length ? getName(v.children) : null
        }
    })
}
// 点击树形节点
async function handleNodeClick(row) {
}
</script>

有搜索框需求的可以按下一文章