element目录树组件el-tree使用相关笔记

原创

已于 2024-12-05 17:58:11 修改 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #vue.js #javascript #elementui

于 2023-11-13 19:19:02 首次发布

文章详细介绍了Vue中el-tree组件的配置、懒加载数据处理、递归遍历、搜索功能、节点高亮、图标添加、可编辑树以及点击事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认配置

            <el-tree
              ref="tree"
              highlight-current // 高亮当前选中节点
              accordion // 只打开一个同级树节点展开
              :data="treeData" 
              :expand-on-click-node="false" // 单击节点是否展开(懒加载模式下无效)
              :props="treeDefaultProps" // 映射属性值
              node-key="id" // 标识属性
              :default-expanded-keys="['-1']"  // 默认展开的节点
              @node-click="handleNodeClick" 
              :filter-node-method="filterNode" // 对树节点进行筛选时执行的方法，返回 true则显示
              :check-on-click-node="true" // 点击节点时选中
            >
data() {
   
    return {
    
	   	treeData:[
                id: '-1',
                label: '全部',
                leaf: false,
                children: [
				{
   
				...
				},
				{
   
				...
				}
			],
		],
		treeDefaultProps:{
   
        children: 'children',
        label: 'label',
        isLeaf: 'leaf',
      },
    }        
}

懒加载

   <el-tree
     :load="queryTreeData"
     lazy
   >
    // 获取树目录
    queryTreeData(node, resolve) {
   
      const {
    level } = node
      // nodeId 为 -1代表第一次请求
      let nodeId = level == 0 ? '-1' : node.data.id
      const params = {
   
        displayTable: true,
        parentId: nodeId,
      }
      api
        .queryDirectoryLazyLoad(params)
        .then((res) => {
   
          const nodes = res.map((item) => ({
   
            id: item.id,
            label: item.name,
            leaf: !item.hasChildren,
          }))
          // 初始化请求
          if (level == 0) {
   
            resolve([
              {
   
                id: '-1',
                label: '全部',
                leaf: false,
                children: nodes, // 非必要
              },
            ])
          } else {
   
            resolve(nodes)
          }
        })
        .then(() => {
   
          this.$refs.tree.setCurrentKey(this.directoryId)
        })
        .catch((error) => {
   
          console.log(error)
        })
    },

每一级分页懒加载

(待补充)

递归处理数据

递归遍历树级结构，进行字段映射

    mapTree(data) {
   
      const haveChildren =
        Array.isArray(data.childNode) && data.childNode.length
      return {
   
        label: data.nodeName,
        id: data.nodeId,
        children: haveChildren
          ? data.childNode.map((i) => this.mapTree

最低0.47元/天解锁文章