element ui 的树形组件上手

最新推荐文章于 2023-05-06 12:00:00 发布

达子玩玩博客

最新推荐文章于 2023-05-06 12:00:00 发布

阅读量6.8k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/dylan_zeng92/article/details/77923286

版权

本文主要介绍了如何在Vue项目中使用Element UI的树形组件，特别是动态加载数据的实现方式。通过引入tree组件并展示效果图，重点解析了`node-click`回调函数及其参数，以及`load`方法的使用，包括Promise的处理。

摘要由CSDN通过智能技术生成

官方文档地址：http://element.eleme.io/#/zh-CN/component/tree
这里不对element ui做过多介绍，直接介绍工作最常用的一个动态加载树形组件的常用用法
引入tree组件的代码如下：

<el-tree :data="data" :props="props" lazy @node-click="handleNodeClick" :load="loadNode"></el-tree>
/* 
    动态加载lazy参数和load方法是必选的,
    lazy:为节点store（TreeStore）中的属性，可输出当前节点进行查看
    load：加载子数据的方法，用法为function(node,reslove){}
    */
<script>
  export default {
    data() {
      return {
        props:{
        //配置父子树的属性名
          label:'parent',
          children:'sub'
        }
      };
    },
    methods: {
    //点击节点的处理事件，可以更改显示节点的内容
      handleNodeClick(data){
      //在这里改变加载的数据无法刷新树数据
        //to do something ,load data from server and show the data to the view
        if(data.label == 1){
   //判断点击节点，choose the node you clicked
        /*to do something*/
        }
        console.log(data.label)