vue+element树组件 实现树懒加载的过程详解


Posted in Javascript onOctober 21, 2019

一.页面样式

vue+element树组件 实现树懒加载的过程详解

二.数据库

vue+element树组件 实现树懒加载的过程详解

 三.前端页面代码

<template>
 <el-tree :props="props"
   :load="loadNode"
   lazy
   show-checkbox>
 </el-tree>
</template>

<script>
export default {
 data () {
 return {
  props: {
  label: 'name',
  children: 'zones',
  isLeaf: 'leaf',

  },
 };
 },
 methods: {
 loadNode (node, resolve) {
  //如果展开第一级节点,从后台加载一级节点列表
  if (node.level == 0) {
  this.loadfirstnode(resolve);
  }
  //如果展开其他级节点,动态从后台加载下一级节点列表
  if (node.level >= 1) {
  this.loadchildnode(node, resolve);
  }
 },
 //加载第一级节点
 loadfirstnode (resolve) {

  this.api({
  url: "/test/tree",
  method: "post",

  }).then(data => {
  console.log(data);
  //this.data = data.list;
  return resolve(data.list);

  })
 },
 //加载节点的子节点集合
 loadchildnode (node, resolve) {
  this.api({
  url: "/test/tree2",
  method: "post",
  params: {
   id: node.data.id
  }
  }).then(data => {
  console.log(data);
  //this.defaultProps.children = data.list;
  return resolve(data.list);

  })
 }

 }

}
</script>

controller层

@PostMapping("/tree")
 public JSONObject tree( ) {return userService.tree();
 }

 @PostMapping("/tree2")
 public JSONObject tree(@RequestParam Map<String, Object> user) {return userService.tree2(user);
 }

service层

/**
  * 树
  */
 JSONObject tree();
 
 /**
  * 树
  */
 JSONObject tree2(Map<String, Object> user);

serviceImpl层

@Override
 public JSONObject tree() {
  List<JSONObject> list=userDao.tree();
  System.out.println(list);
  return CommonUtil.successPage(list);
 }
 @Override
 public JSONObject tree2(Map<String, Object> user) {
  int codept=Integer.parseInt(user.get("id").toString()) ;
  List<JSONObject> list=userDao.tree2(codept);
  return CommonUtil.successPage(list);
 }

dao层

/**
  * 树
  */
 List<JSONObject> tree();
 List<JSONObject> tree2(@Param("codept")int codept);

mapper层

<select id="tree" resultType="com.alibaba.fastjson.JSONObject">
  SELECT [id]
  ,[codept]
  ,[name]
 FROM [dbo].[Dept] WHERE codept ='0'
 </select>

 <select id="tree2" resultType="com.alibaba.fastjson.JSONObject">
  SELECT [id]
  ,[codept]
  ,[name]
 FROM [dbo].[Dept] WHERE codept =#{codept}
 </select>

总结

以上所述是小编给大家介绍的vue+element树组件 实现树懒加载的过程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
Node.js模块加载详解
Aug 16 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
理解AngularJs指令
Dec 10 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
JavaScript函数IIFE使用详解
Oct 21 #Javascript
vue实现侧边栏导航效果
Oct 21 #Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 #Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 #Javascript
关于Vue中axios的封装实例详解
Oct 20 #Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 #Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
php的4种常见运行方式
2015/03/20 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python-opencv 双线性插值实例
2020/01/17 Python
python多线程和多进程关系详解
2020/12/14 Python
中专生职业生涯规划书范文
2014/01/10 职场文书
新年团拜会主持词
2014/04/02 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
党员批评与自我批评
2014/10/15 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
售后服务承诺函格式
2015/01/21 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电