vue按需引入elementui组件(vue ElementUI实现异步加载树)
类别:编程学习 浏览量:2781
时间:2022-01-14 02:11:05 vue按需引入elementui组件
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> <li 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> </li> </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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vuevlog制作软件(Vue实现Dialog封装)
- vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
- vue react和angular(详解React Angular Vue三大前端技术)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vue通过什么获取dom(vue异步更新dom的实现浅析)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue加载html5动画(vue实现旋转木马动画)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- vue组件之间的通信(超详细的vue组件间通信总结)
- vue 优雅写法(使用vue实现手写签名功能)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- 缅甸旅游攻略(缅甸旅游攻略必去景点推荐)
- 《庆余年2》新消息,原班人马,肖战特别出演,这才是最好的安排(庆余年2新消息原班人马)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
- 寒假余额不满24小时,不如来一场说走就走的亲子阅读之旅(寒假余额不满24小时)
- 省委书记出席的交流会,十位县委书记同场发言,代表公文材料的高水平(省委书记出席的交流会)
热门推荐
- docker进入容器的命令(Docker 最常用的镜像命令和容器命令详解)
- selenium是否登录成功(使用selenium模拟登录解决滑块验证问题的实现)
- react教程简介(react入门级详细笔记)
- dedecms栏目列表(dedecms子栏目中调用其顶级栏目名称和简介的方法)
- python怎么进行参数传递(在Python中如何传递任意数量的实参的示例代码)
- 终于有人将mysql 索引讲清楚了(MySQL 索引的一些细节分享)
- python中导入模块的命令(Python3 导入上级目录中的模块实例)
- python实现栈和队列(Python利用heapq实现一个优先级队列的方法)
- 香港服务器有哪些优势呢(浅谈香港服务器与香港云主机的区别)
- laravel队列流程(Laravel 创建指定表 migrate的例子)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9