vue+element樹組件實現(xiàn)樹懶加載的過程詳解

更新時間：2019年10月21日 09:09:04 作者：___mouM

這篇文章主要介紹了vue+element樹組件實現(xiàn)樹懶加載的過程，本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

一.頁面樣式

二.數(shù)據(jù)庫

三.前端頁面代碼

 <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) {
  //如果展開第一級節(jié)點，從后臺加載一級節(jié)點列表
  if (node.level == 0) {
  this.loadfirstnode(resolve);
  }
  //如果展開其他級節(jié)點，動態(tài)從后臺加載下一級節(jié)點列表
  if (node.level >= 1) {
  this.loadchildnode(node, resolve);
  }
 },
 //加載第一級節(jié)點
 loadfirstnode (resolve) {

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

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

  })
 },
 //加載節(jié)點的子節(jié)點集合
 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>

總結(jié)

以上所述是小編給大家介紹的vue+element樹組件實現(xiàn)樹懶加載的過程詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: