el-tree 在 el-dialog 显示时 重新加载 el-tree (el-tree采用懒加载)

原本的 el-tree 组件 在执行完 树节点 的懒加载后 就不会触发 load

若想重新加载需要 拿到树的根节点 然后清空子树 重新调用 load 的请求函数

请自行参考官方文档,只展示关键部分

if (node.level === 0) {
        this.node_had = node // 保存根节点
        this.resolve_had = resolve 
        ...

在需要重载的地方,添加如下代码

if (this.node_had) {
  this.node_had.childNodes = [] // 清空子节点
  this.loadNode(this.node_had, this.resolve_had) // 再次执行 load 的方法
}

针对 el-dialog 可在控制 对话框显示的地方添加。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-dialog中清空el-tree的方法主要有两种。一种是在取消按钮点击事件中重置el-tree的数据,另一种是在el-dialog关闭重置el-tree的数据。 方法一,取消按钮点击事件中清空el-tree的数据: 在el-dialog中添加取消按钮,并绑定点击事件cancelForm。在cancelForm方法中,将el-tree的数据清空即可。根据引用的代码,可以在取消按钮的点击事件中使用this.$refs["tree"].data = []来清空el-tree的数据。 方法二,el-dialog关闭清空el-tree的数据: 在el-dialog的关闭事件中清空el-tree的数据。可以在el-dialog的@close事件中调用一个方法,例如resetTreeData,在resetTreeData方法中将el-tree的数据清空。根据引用的代码,可以使用this.$refs["tree"].data = []来清空el-tree的数据。 需要注意的是,在el-tree的数据清空之前,需要先将el-tree的数据引用传递给this.$refs["tree"].data,然后将其赋值为空数组即可清空el-tree的数据。 综上所述,您可以选择在取消按钮点击事件中清空el-tree的数据,或者在el-dialog关闭事件中清空el-tree的数据。两种方法都可以实现el-dialogel-tree的清空操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【轻松解决el-dialog关闭后数据缓存 没清空】](https://blog.csdn.net/weixin_43690623/article/details/127537512)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [el-tree,el-table,el-dialog表格对话框常见后台管理界面前端使用经验分享](https://blog.csdn.net/qq_45163356/article/details/123736308)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值