学无先后,达者为师

网站首页 编程语言 正文

element-ui,tree树形控件,通过接口返回数据判断是否继续拿子节点

作者:狐逍超 更新时间: 2023-10-09 编程语言

这里使用到树形控件的懒加载功能-直接上代码

<el-tree
   ref="selecteltree"
   class="main-select-el-tree"
   node-key="id"
   highlight-current
   :props="props"
   :load="loadNode1"
   lazy
   @node-click="handleNodeClick"
></el-tree>


export default {
    components: { VideoPlayer, RtmpPlayer },
    name: "stock", // 要自动注册init事件,必须等于文件名!
    data() {
        return {
            // 自定义名
            props: {
               label: "name", // 自定义显示
               children: "zones",
               isLeaf: "leaf",
            },
    },
    methods: {
        loadNode1(node, resolve) {
            // node:当前点击项的所有数据(包括返回数据) // resolve:渲染数据到当前项子节点

            // 当前第一层: 自动调用接口拿到第一层的数据
            if (node.level === 0) {
                // 换成你需要的请求接口
                api.getCountByDateTwo("001", "001").then((res) => {
                    if (res.data.code == 0) {
                        let data = res.data.data.value;
                        console.log(data);
                        // 这个是要的
                        return resolve(data);
                    }
                });
            }
            // 判断当前节点是否有下一层: 判断条件看需求自定义
            if (node.data && node.data.nodeType == "org") {
                api.getCountByDateTwo(node.data.id, "001;1").then((res) => {
                    if (res.data.code == 0) {
                        let data = res.data.data.value;
                        console.log(data);
                        // 将子节点数据给到当前节点: 数据结构为数组套对象: [{},{}]
                        return resolve(data);
                    }
                });
            } else if (node.data && node.data.nodeType == "dev") {
                api.getCountByDateTwo(node.data.id, "001;00;1").then((res) => {
                    if (res.data.code == 0) {
                        let data = res.data.data.value;
                        let list = [];
                        // 也可以直接改
                        data.forEach((el) => {
                            list.push({
                                name: el.name,
                                id: el.id,
                                nodeType: el.nodeType,
                                leaf: true, // 决定是否有子节点
                            });
                        });
                        console.log(list);
                        return resolve(list);
                    }
                });
            }
        },
        
        // 当前项点击触发: e为当前数据
        handleNodeClick(e) {
            console.log(e);
            // this.$refs.selectTree.blur() // 收起tree
        },
};

以上就是一个简单的通过接口来获取下层数据-并已树形展示:elelment官方文档上的懒加载就是这个

还有一种是带有勾选框的: 需要改变源代码来实现:后面有空在搞吧

原文链接:https://blog.csdn.net/m0_57884221/article/details/128116006

  • 上一篇:没有了
  • 下一篇:没有了
栏目分类
最近更新