编写版本：v1.2.1
适用版本：v1.2.0+
前置条件：使用的工程需在 Webpack5 版本以上，并使用模块联邦（ModuleFederationPlugin）接入 ui-base-core 项目提供的共享组件

共享组件-树形列表

一、 效果图

二、 组件路径

baseCore/core-tree.vue

源码：ui-base-core/src/components/core-tree/index.vue

三、 使用举例

template

<template>
    <Tree
      :data="treeData"
      title="主题分类"
      placeholder="输入名称检索"
      :is-search="true"
      :parent-id="treeParentId"
      :expand-parent="true"
      :default-tree-props="defaultTreeProps"
      :default-expanded-keys="defaultExpandedKeys"
      :lazy="true"
      :load-lazy-data="loadLazyData"
      @search="handleTreeSearch"
      @refresh="handleTreeSearch"
      @node-click="handleTreeNodeClick"
      @node-clickMenu="handleTreeNodeMenuClick"
    >
      <template #nodeLabel="{ data }">
        <!-- 自定义文本 -->
      </template>
      <template #nodeIcon="{ node, data }">
        <!-- 自定义图标 -->
      </template>
    </Tree>
</template>

script

<script setup>
import { ref } from 'vue'

import TreeUtils from '@/utils/tree'
import Utils from '@/utils/util'
import ActionUtils from '@/utils/action'

import Tree from 'baseCore/core-tree.vue'

const treeLoading = ref(false)
const treeData = ref([])
const treeParentId = ref('0')
const searchValue = ref('')
const defaultExpandedKeys = ref([])
const defaultTreeProps = {
  children: 'children',
  label: 'typeName',
  class: 'data-tree-node',
  nodeMenu: 'nodeMenu',
  // 判断是否是叶子节点
  isLeaf: (d) => d.leaf
}

// 加载数据主方法
const loadTreeData = (id, resolve) => {
  treeLoading.value = true
  const params = ActionUtils.formatParams({
    name: searchValue.value,
    parentId: id
  })
  findTree(params)
    .then((data) => {
      treeLoading.value = false
      // 设置节点菜单
      data?.forEach((item) => {
        item[defaultTreeProps.nodeMenu] = [
          {
            key: 'preview',
            label: '总览'
          },
          {
            key: 'add',
            label: '新增'
          }
        ]
      })
      resolve(data)
    })
    .catch(() => {
      treeLoading.value = false
      resolve([])
    })
}

// 转换树形方法
const toTree = (data) => {
  return TreeUtils.transformToTreeFormat(data, {
    idKey: 'id',
    pIdKey: 'parentId',
    childrenKey: 'children'
  })
}

// 懒加载数据方法
const loadLazyData = (node, resolve) => {
  if (searchValue.value) {
    return resolve(node.data?.children || [])
  }
  const isRoot = node.level === 0
  if (isRoot) {
    return resolve(node.data)
  }
  if (node.level === 1) {
    return resolve(node.data?.children || [])
  }
  loadTreeData(node.data.id, (data) => {
    if (!data) {
      resolve([])
      return
    }
    const treeData = Utils.isNotEmpty(data) ? toTree(data) : []
    resolve(treeData)
  })
}

// 初始化数据
const initData = () => {
  defaultExpandedKeys.value = []
  loadTreeData(null, (data) => {
    const d = Utils.isNotEmpty(data) ? toTree(data) : []
    treeData.value = d
    treeParentId.value = !!searchValue.value && d?.length ? d[0].id : '0'
    if (searchValue.value) {
      defaultExpandedKeys.value = data.map(item => item.id)
    }
  })
}

// 树形搜索事件
const handleTreeSearch = (val) => {
  searchValue.value = val
  initData()
}

// 节点点击事件
const handleTreeNodeClick = (data) => {
}

// 节点右键菜单处理
const handleTreeNodeMenuClick = (key, data) => {
}
</script>

四、 组件API

属性

事件

插槽