【 elementUI---Tree树形控件 】---懒加载自定义子节点

一、使用背景

在项目中，通常面临这样的需求：一级菜单点击后会出现二级菜单，并且点击一级菜单发送的请求返回的数据是二级菜单内容。面对这样的需求，运用elementUI库，首先想到的组件是Tree属树形控件中的懒加载自定义子节点。实现的需求如下图：

如果返回的数据已经是层级数据，不需要每点击一次渲染下一级子菜单，则只需要使用基础用法稍加修改即可。附上官网文档链接：Element - The world's most popular Vue UI framework

 二、组件解读

这是官网的例子，接下来会一步一步分析代码含义

<el-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox>
</el-tree>

:props：可指定组件中属性：

        label：节点名称

        children：指定子节点对象

        isLeaf：指定节点是否为子节点（lazy属性下生效）

:load：加载子节点方法函数，函数有两个参数：node、resolve   

node：

        打印node可以发现：其实是一个对象，里面有很多属性。这里着重说一下两个属性：

        childNodes：这里是当前节点数据，有5个代表这一层目录有条目录渲染

        level：代表当前层级

resolve：是一个回调函数resolve（data），里面需要传入参数data，作为下一级菜单数据

lazy：代表使用懒加载子节点（需要与load方法结合使用）

node-click事件：节点被点击时候的回调

 第一个参数：是一个对象，对象里面是当前点击的节点数据

第二个参数：该节点

第三个参数：当前组件本身

三、实例分析

这是官网组件给的小案例，简单写一下代码意思：

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name',  // 菜单显示名称
          children: 'zones',  // 指定子节点属性值
          isLeaf: 'leaf' // 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
        },
      };
    },
    methods: {
      loadNode(node, resolve) {
        if (node.level === 0) { // 如果是第一层
          return resolve([{ name: 'region' }]); 
      // 调用resolve函数，传入{ name: 'region' }，表示第二级菜单有且只有一个名为region的数据
        }
        if (node.level >= 1) return resolve([]); 
        // 如果层级是第一层及后面层级，返回空数据
        setTimeout(() => {
          const data = [{
            name: 'leaf',
            leaf: true
          }, {
            name: 'zone'
          }];
          resolve(data);
        }, 500);
      }
    }
  };
</script>

实际使用：

<template>
  <el-tree :props="props" :load="loadNode" lazy></el-tree>
</template>
 
<script>
export default {
  name: 'addGoods',
  data() {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf',
      },
    }
  },
  methods: {
    async loadNode(node, resolve) {
      if (node.level === 0) {
        const res = await this.$store.dispatch(
          'goodsList/getGoodsItemCategory',
          1,
        )
        return resolve(res)
      }
      if (node.level >= 1) {
        const res = await this.$store.dispatch(
          'goodsList/getGoodsItemCategory',
          node.data.cid,
        )
        return resolve(res)
      }
    },
  },
  created() {},
}
</script>
 
 
//  获取数据接口方法封装
async getGoodsItemCategory( params) {
    const res = await api.goodsItemCategory({ type: params })
    console.log(res)
    if (res.data.status === 200) {
       return res.data.result
     } else {
       return []
     }
    },

 这里主要注意：如果是第一层（node.level === 0）带入默认参数发送请求回去数据。如果是第二层及以上，则需要携带参数发送请求（根据传参数不同，这里是获取点击的数据中的cid作为参数发送请求）

 四、额外补充

1.render-content属性---树节点内容的自定义

render-content属性可对每个节点内容区域进行自定义编辑，其值是一个渲染函数Function(h, { node, data, store }

第一个参数h，打印后我们看到是为一个回调函数

第二个参数是一个对象，里面包含节点信息，节点数据以及存储树

node：

data：

store：

在自定义节点内容时，多会用到参数data，展示的是每个节点的数据

html代码

<!-- 树形结构数据 -->
<el-tree
     :data="this.treeData"
     show-checkbox
     default-expand-all
     node-key="id"
     :render-content="renderContent"
     :expand-on-click-node="false"
></el-tree>

js代码

// 树节点渲染方法
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span class="name">{data.name}</span>
          {data.type === 1 ? (
            <span>
              <el-button size="mini" icon="el-icon-plus"> 新增 </el-button>
              <el-button size="mini" icon="el-icon-edit"> 修改 </el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete"> 删除 </el-button>
            </span>
          ) : (
            <span>
              <el-button size="mini" icon="el-icon-edit"> 修改 </el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete"> 删除 </el-button>
            </span>
          )}
        </span>
      )
    },

节点内容自定义，也可以通过scoped slot实现