快捷導(dǎo)航

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

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

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

一.頁(yè)面樣式

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

三.前端頁(yè)面代碼

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

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

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

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

 /**
  * 樹(shù)
  */
 JSONObject tree();
 
 /**
  * 樹(shù)
  */
 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層

 /**
  * 樹(shù)
  */
 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樹(shù)組件實(shí)現(xiàn)樹(shù)懶加載的過(guò)程詳解,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: