el-tree懒加载数据改变后不能实时刷新问题

刘斩仙的笔记本

于 2024-07-03 17:41:55 发布

阅读量346

点赞数 2

分类专栏： Element 文章标签： vue.js el-tree el-tree懒加载 el-tree更新数据

本文链接：https://blog.csdn.net/qq_25252769/article/details/140158521

版权

Element 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

简介

设置lazy后，加载数据通过load获取，如果外部搜索条件改变，数据源变动后，el-tree仍然是老数据不更新最新数据，因为el-tree加载后会缓存，需要主动设置data去更新最新数据

效果

在这里插入图片描述

源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <title>el-tree懒加载数据改变后不能实时刷新问题</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css">
    <style>
        /* 页面所需样式 */
        html,
        body,
        #app {
            width: 100%;
            margin:0;
            padding: 0;
        }

        .cardBox {
            width: 50%;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
            margin: 0 auto;
        }
        .tree{
            width: 100%;
            margin-top: 20px;
        }

        
    </style>
</head>

<body style="background: #eee;">
    <div id="app" class="pt10">
        <div class="cardBox pl10 pr10 pt15 pb15 borBox bgf ml12 mr12 mb12 fz16">
            <p>设置lazy后，加载数据通过load获取，如果外部搜索条件改变，数据源变动后，el-tree仍然是老数据不更新最新数据，因为el-tree加载后会缓存，需要主动设置data去更新最新数据</p>
            <el-radio-group v-model="radio" @change="radioChange">
                <el-radio-button label="shanghai">上海</el-radio-button>
                <el-radio-button label="beijing">北京</el-radio-button>
            </el-radio-group>
            <el-tree class="tree" :load="loadNode" :data="treeData" lazy :props="defaultProps" node-key="name">
                <div slot-scope="{ node, data }" >
                    <span>{{ node.label }}</span>
                    <el-popconfirm title="确定下载吗？" @confirm="downFile(node, data)">
                        <el-button type="text" slot="reference" icon='el-icon-download'></el-button>
                    </el-popconfirm>
                </div>
            </el-tree>
        </div>
    </div>
</body>

<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                radio:'shanghai',
                defaultProps: {
                    label: 'name',
                    children: 'children',
                    isLeaf: 'leaf'
                },
                treeData:[],
                allCity:{
                    shanghai:[
                        {
                            name: '浦东新区',
                            path: '/pudong',
                            leaf: false,
                            children:[
                                {
                                    name: '张江',
                                    path: '/zhangjiang',
                                    leaf: true
                                },
                                {
                                    name: '周浦',
                                    path: '/zhoupu',
                                    leaf: true
                                },
                                {
                                    name: '南汇',
                                    path: '/nanhui',
                                    leaf: true
                                },
                            ]
                        },
                        {
                            name: '临港新区',
                            path: '/pudong',
                            leaf: false,
                            children:[
                                {
                                    name: '滴水湖',
                                    path: '/dishuihu',
                                    leaf: true
                                },
                                {
                                    name: '海事大学',
                                    path: '/haishi',
                                    leaf: true
                                },
                                {
                                    name: '海洋大学',
                                    path: '/haiyang',
                                    leaf: true
                                },
                            ]
                        }
                    ],
                    beijing:[
                        {
                            name: '雄安新区',
                            path: '/xiongan',
                            leaf: false,
                            children:[
                                {
                                    name: '雄安一区',
                                    path: '/xyi',
                                    leaf: true
                                },
                                {
                                    name: '雄安二区',
                                    path: '/xer',
                                    leaf: true
                                },
                                {
                                    name: '雄安三区',
                                    path: '/xsan',
                                    leaf: true
                                },
                            ]
                        },
                        {
                            name: '朝阳区',
                            path: '/chaoyang',
                            leaf: false,
                            children:[
                                {
                                    name: '朝阳一区',
                                    path: '/cyi',
                                    leaf: true
                                },
                                {
                                    name: '朝阳二区',
                                    path: '/cer',
                                    leaf: true
                                },
                                {
                                    name: '朝阳三区',
                                    path: '/csan',
                                    leaf: true
                                },
                            ]
                        }
                    ]
                }
            }
        },
        created() {
            // 模拟点击改变搜索条件，请求接口，拿到新数据
            setTimeout(() => {
                this.treeData = this.allCity[this.radio]
            } ,300)   
        },
        mounted() {
            
        },
        methods: {
            // 条件切换
            radioChange(){
                // 模拟点击改变搜索条件，请求接口，拿到新数据
                setTimeout(() => {
                    this.treeData = this.allCity[this.radio]
                } ,300)    
            },
            // 动态加载
            loadNode(node, resolve) {
                if (node.level === 0) {
                    resolve(this.treeData)
                }else{
                    // 打开子目录
                    if(node.data.path){
                        // 模拟请求接口获取子集数据
                        setTimeout(() => {
                            resolve(node.data.children)
                        } ,300)
                    }
                }
            },
            // 下载文件
            downFile(node, data){
                window.location.href = `http://www.baidu.com/${encodeURIComponent(data.path)}`
            },
        }
    })
</script>

</html>

刘斩仙的笔记本

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
el-tree懒加载数据改变后不能实时刷新问题

设置lazy后，加载数据通过load获取，如果外部搜索条件改变，数据源变动后，el-tree仍然是老数据不更新最新数据，因为el-tree加载后会缓存，需要主动设置data去更新最新数据。
复制链接

扫一扫