vue ElementUI实现异步加载树

本文实例为大家分享了vue ElementUI实现异步加载树的具体代码，供大家参考，具体内容如下

路由文件修改

import List from \'@/components/list.vue\'
import Add from \'@/components/add.vue\'
import Tree from \'@/components/tree.vue\'
import AsynTree from \'@/components/asyntree.vue\'

export default{
    routes:[
        {path:\"/list\",component:List},
        {path:\"/add\",component:Add},
        {path:\"/add/:id\",component:Add},
        {path:\"/tree\",component:Tree},
        {path:\"/asyntree\",component:AsynTree}
    ]

}

首页app.vue

<template>
  <div id=\"app\">
    <router-link to=\"/add\">添加</router-link>&nbsp;&nbsp;
    <router-link to=\"/list\">列表</router-link>&nbsp;&nbsp;
    <router-link to=\"/tree\">树结构</router-link>&nbsp;&nbsp;
    <router-link to=\"/asyntree\">异步树结构</router-link>&nbsp;&nbsp;
    <router-view></router-view>
  </div>
</template>

<script>
import List from \'./components/list.vue\'

export default {
  name: \'app\',
  components: {
    List
  }
}
</script>

<style>
#app {
  font-family: \'Avenir\', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

异步加载树页面

<template>


<el-container>
  <el-aside width=\"200px\">
    <el-tree ref=\"tree\"
    :data=\"data\"
    lazy
    show-checkbox
    node-key=\"id\"
    check-strictly
    :load=\"loadnode\"
    :props=\"defaultProps\"
    @node-click=\"nodeclick\">
    </el-tree>
  </el-aside>
  <el-main>

    <el-form :model=\"typeinfo\" class=\"demo-form-inline\">
    <el-form-item label=\"ID\">
        <el-input v-model=\"typeinfo.id\" readonly></el-input>
    </el-form-item>
    <el-form-item label=\"分类名称\">
        <el-input v-model=\"typeinfo.label\" placeholder=\"分类名称\"></el-input>
    </el-form-item>
    <el-form-item label=\"序号\">
        <el-input v-model=\"typeinfo.seqno\" placeholder=\"序号\"></el-input>
    </el-form-item>
   <el-form-item label=\"父ID\">
        <el-input v-model=\"typeinfo.pid\" readonly></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type=\"primary\" @click=\"dosave\">保存</el-button>
        <el-button type=\"primary\" @click=\"dochildsave\">添加节点</el-button>
    </el-form-item>
    </el-form>

  </el-main>
</el-container>

</template>

<script>
import axios from \'axios\'

export default {
    data() {
        return {
            data:[],//树对象数据模型
            defaultProps: {//树对象属性对应关系
                children: \'children\',
                label: \'label\'
            },
            typeinfo: {//商品分类实体对象
                id:\'\',
                pid:\'\',
                label: \'\',
                seqno: \'\'
            }
        }
    },
    methods: {
        loadnode(node,resolve){
            //如果展开第一级节点，从后台加载一级节点列表
            if(node.level==0)
            {
                this.loadfirstnode(resolve);
            }
            //如果展开其他级节点，动态从后台加载下一级节点列表
            if(node.level>=1)
            {
                this.loadchildnode(node,resolve);
            }
        },
        //加载第一级节点
        loadfirstnode(resolve){
            axios.get(\'http://localhost:6060/loadtype\')
                .then(function(resp){
                    resolve(resp.data);
                })
        },
        //刷新树组件
        refreshtree(){
            var _this = this;
            axios.get(\'http://localhost:6060/loadtype\')
                .then(function(resp){
                    _this.data = resp.data;
                })
        },
        //加载节点的子节点集合
        loadchildnode(node,resolve){
            axios.get(\'http://localhost:6060/loadtypechild?pid=\'+node.data.id)
                .then(function(resp){
                    resolve(resp.data);
                })
        },
        //点击节点上触发的事件，传递三个参数，数据对象使用第一个参数
        nodeclick(data,dataObj,self)
        {
            //alert(data.label+\",id=\"+data.id);
            this.typeinfo.id=data.id;
            this.typeinfo.pid=data.pid;
            this.typeinfo.label=data.label;
            this.typeinfo.seqno=data.seqno;
        },
        //保存分类方法
        dosave()
        {
            var _this = this;
             axios.post(\'http://localhost:6060/savetype\',this.typeinfo)
                .then(function(resp){
                    if(resp.data)
                        _this.refreshtree();
                })
        },
        //保存子分类方法
        dochildsave()
        {
            //判断左侧树组件是否选择了一个节点
            var cnt=this.$refs[\'tree\'].getCheckedNodes().length;
            if(cnt!=1)
            {
                this.$message(\'必须选择唯一父节点\');
                return;
            }
            //通过this.$refs[\'tree\']获取树对象，其中tree是树组件的ref属性
            var dataObj = this.$refs[\'tree\'].getCheckedNodes()[0];
    
            this.typeinfo.id=\'\';
            this.typeinfo.pid=dataObj.id;
            var _this = this;
            axios.post(\'http://localhost:6060/savetype\',this.typeinfo)
                .then(function(resp){
                    if(resp.data)
                        _this.refreshtree();
                })
        }
    }

}
</script>

后台Controller

@RequestMapping(\"/loadtype\")
 @ResponseBody
 public List<TypeInfo> getTypeJson()
 {
  List<TypeInfo> rtn = getFirstNode();
  
  return rtn;
 }
  
 @RequestMapping(\"/loadtypechild\")
 @ResponseBody
 public List<TypeInfo> getTypeByPid(Integer pid)
 {
  System.out.println(\"pid===\"+pid);
  List<TypeInfo> rtn = addsrv.getTypeList(pid);
  
  return rtn;
 }
 
 private List<TypeInfo> getFirstNode()
 {
  TypeInfo root = addsrv.getRootType();
  List<TypeInfo> firstList = addsrv.getTypeList(root.getId());
  for(TypeInfo ti:firstList)
   recurseNode(ti);
  return firstList;
 }
 
 private void recurseNode(TypeInfo ti)
 {
  List<TypeInfo> children = addsrv.getTypeList(ti.getId());
  System.out.println(\"ti.id\"+ti.getId()+\",children=\"+children);
  if(children==null || children.size()==0)
   return;
  ti.setChildren(children);
  for(TypeInfo chd:children)
  {
   recurseNode(chd);
  }
 }
 
 @RequestMapping(\"/savetype\")
 @ResponseBody
 public Boolean savetype(@RequestBody TypeInfo ti)
 {
  try {
   Integer id = ti.getId();
   if(id != null)
    addsrv.updateType(ti);
   else {
    addsrv.saveType(ti);
   }
   return true;
  } catch (Exception e) {
   return false;
  }
  
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。