vue中el-tree增加节点后如何重新刷新

目录
  • 给el-tree增加节点后重新刷新
  • el-tree全树刷新,节点刷新
    • 单节点刷新
    • 全树刷新

给el-tree增加节点后重新刷新

1.树形组件

<el-tree
	v-if="openPanel" 	//重加载
	:data="data" 		//树形数据
	:props="defaultProps"
	node-key="id" 					//默认展开节点
	:default-expanded-keys="[-1]" 	//默认展开节点：-1
	@node-click="handleNodeClick">	//点击事件
</el-tree>

2.data 初级节点"仪表板"默认展开

data() {
	return {
		openPanel:true,
		data: [{
			id: -1,
			label: '仪表板',
			children: [
			]
		}],
		defaultProps: {
			children: 'children',
			label: 'label'
		}
	}
}

见图：

3.完成增加save操作后，重新查询加载树

//先增加
this.doAdd(val);
//然后清空树的数据
this.sup_this.data = [{
	id: -1,
	label: '仪表板',
	children: [

	]
}];
//在0.1s后重新查询并加载树
setTimeout(() => {
	//查询树的数据
	this.queryPanel();
	//<el-tree>组件使用v-if重新加载
	this.openPanel = false;
	this.sup_this.$nextTick(() => {
		this.openPanel = true;
	})
}, 100);

自动加载并打开子节点。

el-tree全树刷新,节点刷新

单节点刷新

1.如果你的el-tree设置了node-key=“id”，拿父节点的id 作为第一个参数，

2.重新请求子节点数据，数组作为第二个参数

3.调用updateKeyChildren

      let {
        updateKeyChildren,
      } = this.$refs.entityTreeRef;
      
      let res = await this.listChildrenNode(this.confTarget);
      updateKeyChildren(id, res);

全树刷新

1.保存上次展开节点的id (可选)

代码如下：

let { nodesMap } = this.$refs.entityTreeRef.root.store;
let lastExpandIds = [];
let localMap = Object.values(nodesMap);
localMap.forEach(item => {
  if (item.expanded) {
    lastExpandIds.push(item.data.id);
  }
});
nodesMap = {};

2.清除本次树的store数据

nodesMap = {};

3.设置树的defaultExpandedKeys属性值变量

let { nodesMap } = this.$refs.entityTreeRef.root.store;
this.defaultExpandedKeys = ids;
this.$refs.entityTreeRef.root.setData(result);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作

    需求: vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据. 增加节点,点击确定后局部刷新,渲染新数据. 源码 element组件样式 <el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-

  • Element-ui el-tree新增和删除节点后如何刷新tree的实例

    一, 当新增节点后刷新当前节点 node.loaded = false; node.expand(); //新建子节点是刷新一次本节点的展开请求,而重命名和删除则需要刷新父级节点的的展开事件, 二, 删除节点 node.parent.loaded = false node.parent.expand() 完毕~ 补充知识:element-ui组件el-tree添加按钮管用,删除按钮,数据会变,但是页面不更新 可能是element-ui 的版本太低了 我用的element-ui 2.4.6 后来发

  • element el-tree组件的动态加载、新增、更新节点的实现

    最近在根据需求,需要用到树形控件,ele 的封装了树形控件正好拿来用,用的途中遇到一些问题就总结下,哈哈哈 说正事,我需要动态的加载出整个树形结构,刚好就有 符合需求,啦啦啦 用的时候出现问题了,我要如何把后台返回个我的数据加载到表里呢,上菜... <template> <el-tree empty-text="暂无数据" :expand-on-click-node="false" :props="defaultProps" :

  • vue中el-tree增加节点后如何重新刷新

    目录 给el-tree增加节点后重新刷新 el-tree全树刷新,节点刷新 单节点刷新 全树刷新 给el-tree增加节点后重新刷新 1.树形组件 <el-tree v-if="openPanel" //重加载 :data="data" //树形数据 :props="defaultProps" node-key="id" //默认展开节点 :default-expanded-keys="[-1]" /

  • 简单理解vue中el、template、replace元素

    本文实例为大家解析了vue中el.template.replace的元素,供大家参考,具体内容如下 api: http://cn.vuejs.org/api/#el el 类型: String | HTMLElement | Function 限制: 在组件定义中只能是函数. 详细: 为实例提供挂载元素.值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数.注意元素只用作挂载点.如果提供了模板则元素被替换,除非 replace 为 false.元素可以用 vm.$el

  • Vue中Video标签播放解析后短视频去水印无响应解决

    Vue中Video标签播放解析后短视频去水印无响应解决

    目录 问题: 情景复现: 链接在Video标签打不开 链接浏览器正常打开 出现的原理 解决方式 前端解决 全局添加标签 Vue单页面添加标签 完美解决: 问题: 发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url 情景复现: 前端发送请求到后端接口 我们前端打

  • Flex中在Tree绑定数据后自动展开树节点的方法

    Flex中在Tree绑定数据后自动展开树节点的方法

    用Flex/Flash做开发的同志们应该会使用 expandChildrenOf(item,true)方法来使用Tree组件在绑定数据后自动展开所有树型节点(不需要用户再自己点击展开节点,会方 便许多),而在Flex开发帮忙文档中很明确写道: "If you set dataProvider and then immediately call expandChildrenOf() you may not see the correct behavior. You should either wa

  • element-ui中实现tree子节点部分选中时父节点也选中

    element-ui中实现tree子节点部分选中时父节点也选中

    目录 子节点部分选中时父节点也选中 el-tree数据回显时子节点部分选中,父节点都全选中的坑 我这里用getNode()的方法来简单解决 子节点部分选中时父节点也选中 如果需求是:选中任何一个子节点都默认选择父节点,怎么办? 其实,element-ui也提供了方案,常规下,如果子节点选中,那么这时父节点是半选中状态,在获取选中值时,只需要利用**getHalfCheckedKeys()+getCheckedKeys()**两个方法即可达到效果.  let zi = this.$refs.tre

  • VUE中setTimeout和setInterval自动销毁案例

    在Vue的大型单页应用中,在某个路由下,经常会出现需要延迟执行(setTimeout)或者间隔之心(setInterval)的函数,但是每次在页面destroy之前,都必须手动清理掉. 正常代码如下: beforeDestroy() { this._timer && clearTimeout(this._timer); } 但是如果一不小心,就会忘记,会造成意想不到的情况,那么有什么办法能避免这种情况吗? 当然有,那就是重新写一个setTimeout的方法(或者干脆劫持window.set

  • Vue中$forceUpdate()的使用方式

    Vue中$forceUpdate()的使用方式

    目录 $forceUpdate()的使用 有两种解决方法 方法一 方法二 关于$forceUpdate的一些理解 $forceUpdate()的使用 在Vue官方文档中指出,$forceUpdate具有强制刷新的作用. 那在vue框架中,如果data中有一个变量:age,修改他,页面会自动更新. 但如果data中的变量为数组或对象,我们直接去给某个对象或数组添加属性,页面是识别不到的 <template> <p>{{userInfo.name}}</p> <but

  • vue中使用elementui实现树组件tree右键增删改功能

    vue中使用elementui实现树组件tree右键增删改功能

    功能描述: 1.右击节点可进行增删改 2.可对节点数据进行模糊查询 3.右击第一级节点可以进行同级节点增加 4.双击节点或点击修改节点 都可以对节点获取焦点并进行修改,回车修改成功 5.可对节点进行拖拽,实现节点移动功能 效果图: 完整代码: <template> <div class="lalala tree-container"> <el-input placeholder="输入关键字进行过滤" v-model="fil

  • vue中利用simplemde实现markdown编辑器（增加图片上传功能）

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • vue中的dom节点和window对象

    vue中的dom节点和window对象

    目录 window对象 dom元素 获取dom节点的3种方式 方式一:(事件源) 方式二:(使用ref) 方式三:(自定义全局指令) window对象 首先window对象是浏览器下的默认对象,也就是全局对象,在没有明确指向的时候this指向window.即使切换路由,window对象里面的属性和方法依旧会保留.因此可以在控制栏直接输入this.window.self都可以直接打印window对象.window对象很很多默认的方法和属性. 一切全局变量和方法都是window的属性和方法,也就是只

随机推荐