vue + elementui 中 在弹框中使用了 tree型结构(<el-tree></el-tree>),点击关闭按钮按钮重置tree

这篇具有很好参考价值的文章主要介绍了vue + elementui 中 在弹框中使用了 tree型结构(<el-tree></el-tree>),点击关闭按钮按钮重置tree。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue 项目中使用了element-ui 中 tree,选择了懒加载的模式
通过点击按钮,使得 tree 重新加载

<div class="head-container header-tree" v-if="addDialogVisible">
	<el-tree
	  ref="tree"
	   :data="treeData"
	   :load="loadnode"
	   :lazy="isLazy"
	   check-on-click-node
	   check-strictly
	   :props="defaultProps"
	   highlight-current
	   accordion
	   node-key="nodeId"
	   @node-expand="keepExpandedNode"
	   @check-change="hChangeTree" 
	   @check="handleCheckChange"
	   :default-expanded-keys="defaultExpandedNodes"
	   :default-checked-keys="defaultCheckedNodes"
	 ></el-tree>
</div>

通过点击重置按钮,使得tree 重新加载

/** 重置按钮操作 */
resetQuery() {
    var that = this;
    // 重载 tree
    that.addDialogVisible = false;
    
    setTimeout(function(){
      that.addDialogVisible = true;
    },200)
}

解决的思路为:通过v-if 的显示隐藏来控制重新加载文章来源地址https://www.toymoban.com/news/detail-660508.html

到了这里,关于vue + elementui 中 在弹框中使用了 tree型结构(<el-tree></el-tree>),点击关闭按钮按钮重置tree的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【el-tree查询并高亮】vue使用el-tree组件,搜索展开并选中对应节点,高亮搜索的关键字,过滤后高亮关键字,两种方法

    效果图这样的,会把所有的有这些的节点都展开 代码: 这里的逻辑就是通过递归循环把所有和匹配的节点筛选出来 然后通过setCheckedKeys方法把他展开选中 然后通过filterReal把高亮标蓝 这个是用的官方文档的那个过滤方式,可以参考官方文档看一下。 只不

    2024年02月15日
    浏览(69)
  • vue3使用element-plus 树组件(el-tree)数据回显

    html搭建结构 js 非常好用,拿过来修改一下check事件,ref获取就直接可以使用了 

    2024年04月09日
    浏览(57)
  • 在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件

    有时遇到一些需求就是在使用树形控件时,服务端并没有一次性返回所有数据,而是返回首层节点列表。然后点击展开首层节点中的某个节点,再去请求该节点的子节点列表,那么就得用上懒加载的机制了。在此以ElementPlus的树形控件为例,实现一个具有懒加载的树形控件的

    2024年02月06日
    浏览(64)
  • Vue中ElementUI结合transform使用时,发现弹框定位不准确问题

            在近期开发中,需要将1920*1080放到更大像素大屏上演示,所以需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置。         查看element-ui官方文档无果后,打算更换新的框架进行开发,但更换几个后发现都存在类似问题

    2024年02月11日
    浏览(30)
  • Vue3+ElementUI 多选框中复选框和名字点击方法效果分离

    现在的需求为 比如我点击了Option A ,触发点击Option A的方法,并且复选框不会取消勾选,分离的方法。   通过Vue事件处理的方法.prevent来阻止。!-- 提交事件将不再重新加载页面 --

    2024年01月22日
    浏览(57)
  • vue elementUI Tree 树形控件的使用方法

    用清晰的层级结构展示信息,可展开或折叠。 效果演示 trees.vue代码 Js代码 数据源格式 按照上面的数据源格式即可生成树形折叠格式列表vue elementUI Tree 树形控件的使用方法-遇见你与你分享

    2024年02月02日
    浏览(41)
  • vue2 - 详细介绍element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例(组件封装)

    在项目上常用使用到 el-select 和 el-tree 组合实现,记录下两者结合的实现过程。(代码以及注释清晰明了,代码直接使用即可) 要求根据项目接口提供的数据,el-tree 里的数据是一次性返回来的,点击最后一层级时,请求接口,在点击层级下方追加数据追加的数据要显示勾

    2024年04月15日
    浏览(64)
  • 【el-tree】树形结构拖拽,修改分组

    背景: 项目中有个左侧菜单,并且各级菜单中的元素是可以拖拽到别的菜单中去,也就是树形结构拖拽修改分组,下面我介绍我项目中使用el-tree进行拖拽分组的方式. 效果: 拖拽到某个节点的前后 首先我们使用的是饿了么组件中的[el-tree]组件,他本身是自带拖拽功能的,只需要加上一

    2024年02月12日
    浏览(89)
  • Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题

            在大屏开发中,比如将1920*1080放到更大像素(3500*2400)大屏上演示,此时需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的el-date-picker /组件修复定位问题,经过网友不断发现和提

    2024年01月19日
    浏览(47)
  • 【VUE】使用elementUI tree组件根据所选id自动回显

     需求如下: 1.点击父级节点 将父级节点下children中所有id放入数组 2.点击父级下的子节点 将点击的子节点放入数组 3.取消选择父节点,将放入数组的所有子节点id删除 4.根据选择的子节点数组,匹配他所属的父节点

    2024年02月15日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包