前端学习_ElementPlus Tree树形组件JavaScript写法

背景

Element Plus官方的文档在Tree树形组件这一块用的全部是TypeScript，奈何没有学习过ts，项目又要用到，故在此记录一下js的写法

组件

<el-tree
      :props="props"
      :load="loadNode"
      lazy
      :expand-on-click-node="false"
      @node-click="clickNode"
    />

主要围绕几个常用功能吧and组件参数，以此类推

属性props

官方说明

指定节点标签为节点对象的某个属性值	

看不懂就对了，官方文档讲的太简略了，我们用一个例子来解读

用法

一般我们都是用后端返回的数据生成树，对吧？
这个属性就是告诉你，json中的哪个key将被映射到对应节点的那个属性

比如我这里有一个JSON

[{ name: "root",  type: "dir" }]

我的要求是，对应的节点显示root，然后如果type是dir的话，则代表还有子节点，所以要显示小三角（可以展开），如下图。

那么我的写法是这样的

这个是在export default {}中的data()

 data() {
    return {
      files: [],
      props: {
        label: "name",//json中的name字段作为label，也就是节点显示的文字
        isLeaf: (data)=>{return data.type!="dir"},//非目录即为叶子节点
      },
    };
  },

大家可以看到isLeaf本来应该接受的是一个布尔值对吧？
但是我们的JSON中是字符串类型的，怎么办呢？
别急，我们再来看看官方文档
看到了吗，类型支持String和function
这样，我们写一个js的箭头函数（其实就是function的简写，可以去了解一下），就可以解决问题了，具体看上面的代码

load懒加载

这里也跟官方的ts风格差异挺大的
这个是在export default {}中的mathods

 methods: {
    loadNode(node, resolve) {
      let data = [{ name: "root2", type: "dir" }];//这句可以换成后端获取
      return resolve(data);
    },
  }

关键来了，resolve()看到了吗
就好比loadNode是一个我自订的处理函数，我在里面写什么，不关Element的事情，但是呢，不管我最后怎么搞，还是得吧要加载的数据还给Element对吧，然后我突然想起，开始的时候，Element不是给了我一个函数（resolve）吗？。嗯这个函数就是专门用来返还数据给Element的，这就是我们所说的回调。

点击事件

一般用点击事件的时候配合:expand-on-click-node="false"使用，这样点击节点的时候就不会触发节点的折叠，记得事件要用@绑定。

官方文档给出了三个参数， ①对应于节点点击的节点对象，②TreeNode节点属性，③事件对象
看不懂对吧…我们自己写个程序来试试

clickNode(n1,n2,n3) {
      console.log("click1",n1);
      console.log("click2",n2);
      console.log("click3",n3);
    },

这里的relativizePath和size大家忽略就好，只是我项目的一些字段
还记得我们之前给过节点一个type: "dir"吗，是一样的，代表了节点的一些属性。

我们看看如何从n1、n2中取出这个type（size）

n1.size
n2.data.size

事实证明，用这两个语句都是可以取出的，n2包含n1。
具体的大家可以去尝试，仅作为一个解决方案or学习记录
相信官方的文档不久后也会更新，到时候这篇文章可能就失效啦

学Element这种框架呢，因为我并不是前端方向的，所以个人不会去发掘其内部的原理，因为这个版本的一些用法，可能在下个版本就不好用了，只要抓住相关理念，知道有这么个东西，用的时候再查资料就好啦。

用框架的话，其实很多你想要的东西大家都已经写好了，任务驱动，多用轮子，才能提高开发效率！