element-ui 级联选择器cascader动态加载的问题

最新推荐文章于 2023-09-27 10:29:08 发布

小小半月

最新推荐文章于 2023-09-27 10:29:08 发布

阅读量3.1k

点赞数 2

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

本文链接：https://blog.csdn.net/lgh1206/article/details/113932595

版权

本文介绍了在使用Element UI的级联选择器Cascader时，如何实现动态加载数据并解决实际项目中遇到的问题。包括根据单位ID获取各级单位，动态加载下级单位，控制节点的展开状态，以及选择单位后的处理和默认显示等。通过示例代码展示了解决方案。

摘要由CSDN通过智能技术生成

前段时间项目里有一个树状单位结构的需求，第一反应就是用elementui里的cascader 级联选择器来做。

本来以为是通过接口直接获取到所有单位树后配置一下就可以了，看了需求文档后发现原来是要通过动态加载的方式来获取。

需求：
1.进入页面之后根据当前的单位Id调用第一个接口来获取第一级的单位，并默认展示。
2.如果当前单位有下级单位则显示箭头，点击调用第二个接口获取下级单位。

很快啊，看着elementui官方文档，写了一个简单的demo，如下：

<template>
    <div class="main">
        <el-cascader :props="props"></el-cascader>
    </div>
</template>
<script>
export default {
   
    data(){
   
        return {
   
            placeholder:"",
            defaultName:"",
            props:{
   
                label:'text',
                value:'id',
                lazy: true,
                lazyLoad:(node, resolve) =>{
     
                    if(node.level == 0 ){
   
                        this.queryTree(node, resolve)
                    }else {
   
                        this.queryMoreTree(node, resolve)
                    }
                },
            }
        }
    },
    methods:{
   
        //获取第一级单位
        queryTree(node, resolve){
   
            setTimeout(() => {
   
                let res = [{
   id:"1",text:"北京",hasChildren:true}];
                res.forEach(item => {
   
                    return {
   
                        value:item.id,
                        label:item.text,
                        leaf:item.leaf
                    }
                })
                console.log(res)

                resolve(res)
            }, 500);

        },
        //获取下级单位
        queryMoreTree(node, resolve){
   
            setTimeout(() => {
   
                let<