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 相关文章推荐
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
javascrip关于继承的小例子
May 10 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 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
相对路径转化成绝对路径
2007/04/10 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
微信小程序实现弹出菜单
2018/07/19 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
快速查询Python文档方法分享
2017/12/27 Python
python实现自动登录
2018/09/17 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
建筑工程自我鉴定
2013/10/18 职场文书
精细化工应届生求职信
2013/11/17 职场文书
质检部部长职责
2013/12/16 职场文书
美德好少年主要事迹
2014/01/29 职场文书
九年级英语教学反思
2014/01/31 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
中学生检讨书范文
2014/11/03 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书