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> <router-link to="/list">列表</router-link> <router-link to="/tree">樹結構</router-link> <router-link to="/asyntree">異步樹結構</router-link> <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; } }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- elementui中使用el-tree控件懶加載和局部刷新
- vuejs路由的傳參及路由props配置詳解
- Vue實現前後端完全分離的項目實戰
- vue深度優先遍歷多層數組對象方式(相當於多棵樹、三級樹)
- vue+quasar使用遞歸實現動態多級菜單