elementui树形控件懒加载

最新推荐文章于 2024-07-08 15:42:31 发布

益达木咸醇

最新推荐文章于 2024-07-08 15:42:31 发布

阅读量1k

点赞数

分类专栏：前端文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_45766506/article/details/119117464

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>elementui</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-tree
        show-checkbox
        node-key="id"
        ref="tree"
        lazy
        highlight-current
        :props="defaultProps"
        :load="loadTree">
        </el-tree>
        <button @click="getTree">获取树</button>
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
              defaultProps: {
                children: 'children',
                label: 'label',
                isLeaf: 'isLeaf'
              }
            },
            methods: {
              //在懒加载的方法中会有node,resolve两个参数,也可以打印看一下
              loadTree (node,resolve) {
                if(node.level === 0) {
                  //这是树形控件的最外层
                  this.initTree(node,resolve);    //将接口请求数据写成vue中的方法，并把两个参数一并传过去（node看需要，要用到就传，不用可不传）
                }
                if(node.level >= 1) {
                  this.getTreeItem(node,resolve);   //获取子节点的方法，这里必须要传node，因为需要父节点的ID或者其他字段之类的来发起请求
                }
              },
              initTree (node,resolve) {
                  //请求接口这里我就不写了，接口返回回来的应该是一个对象数据
                  var res = [
                    {
                      id: '566',
                      label: 'sdgsdg',
                      children: [],
                      isLeaf: false,
                      hasChildren: true
                    },
                    {
                      id: '57457',
                      label: 'sdgd',
                      children: [],
                      isLeaf: false,
                      hasChildren: true
                    },
                    {
                      id: '2222',
                      label: 'fhh',
                      children: [],
                      isLeaf: false,
                      hasChildren: false
                    }];    //假设为这样
                    //不管你要对上面的数组要做什么操作都要在resolve前
                    resolve(res);  //渲染树节点方法
                    
              },
              getTreeItem (node,resolve) {
                  //通过node可以拿到点击节点的所有信息
                  console.log(node);
                  var item = [
                    {
                      id: '3243',
                      label: '22',
                      children: [],
                      isLeaf: true,
                      hasChildren: true
                    },
                    {
                      id: '555',
                      label: '829',
                      children: [],
                      isLeaf: true,
                      hasChildren: true
                    },
                    {
                      id: '77',
                      label: '35325',
                      children: [],
                      isLeaf: true,
                      hasChildren: false
                    }];  //模拟数据
                    resolve(item);
              },
              getTree () {

              }
            }
        })
    </script>
</body>
</html>

益达木咸醇

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
elementui树形控件懒加载

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ele
复制链接

扫一扫

专栏目录