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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
Seajs源码详解分析
Apr 02 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
php实现获取文件mime类型的方法
2015/02/11 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
取得父标签
2006/11/14 Javascript
Prototype使用指南之ajax
2007/01/10 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
python从入门到精通(DAY 1)
2015/12/20 Python
利用Python如何生成随机密码
2016/04/20 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
2019年Java 最常见的 面试题
2016/10/19 面试题
中学生学习生活的自我评价
2013/10/26 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
职工小家建设活动方案
2014/08/25 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js