vue3+elementPlus：每次进入页面，懒加载的el-tree控件数据要局部刷新

原创

已于 2023-03-02 15:26:38 修改 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript #前端 #ecmascript

于 2023-01-10 15:30:52 首次发布

文章介绍了在uniapp中如何使用el-tree组件实现懒加载，并结合生命周期函数onActivated来动态更新树形结构。同时，文章提到了列表加载更多的处理方式，特别是在页数达到总页数时的判断逻辑。

    <el-tree 
    v-if="treeVisible"  
    :load="loadNode" 
    lazy 
    node-key="id" 
    :props="{ label: 'name', isLeaf: 'leaf' }" >
            <template #default="{ node, data }">
                        <span>
                            {
  
  { data.name }}
                        </span>
            </template>
    </el-tree>

const treeVisible = ref(true) // tree隐藏显示，用于实时刷新tree控件

//生命周期
onActivated(() => {
    //tree隐藏再显示就会触发load方法
    treeVisible.value = false;
    nextTick(() => {
        treeVisible.value = true;
    });
})

上一篇文章，