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

后来发现2.4.11的是管用的

所有更新element-ui版本

cnpm i element-ui@2.13.1

以上这篇Element-ui el-tree新增和删除节点后如何刷新tree的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ElementUI中el-tree节点的操作的实现

    其实tree的有些方法用起来是很方便的, this.$refs.tree.getCheckedKeys():这个原生态的方法.官方文档上说的是,返回一个数组.有了这个方法,我们就可以得到选中的每个节点的id,拿到了id,那所有的问题就迎刃而解了. 废话不多说,直接上代码 html <div id="app"> <el-row> <el-button @click="checkedKeys">得到节点id</el-button

  • 详解vue-element Tree树形控件填坑路

    通过tree树形控件的default-checked-keys属性来设置默认选中的节点 html.vue <el-form-item label="角色权限:"> <el-tree :data="data2" show-checkbox node-key="id" @check="handleNodeClick" :default-expanded-keys="[]" ref="

  • Vuex实现数据增加和删除功能

    首先,我们要安装vuex,执行命令yarn add vuex 1.编写state数据 //vuex/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state = { bookList: [ {id: 1, name: '西游记'},{id: 2, name: '水浒传'}, {id: 3, name: '红楼梦'},{id: 4, name: '三国演义'} ] } export def

  • Element-ui tree组件自定义节点使用方法代码详解

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <div class="sortDiv"> <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-

  • vue实现在进行增删改操作后刷新页面

    问题 通常在后台管理项目中,对数据进行增删改查是常规操作.在进行这些操作后,需要手动刷新才能更新列表.本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据. 解决方案 || 以删除为例: 1.强制刷新:this.$forceUpdate() 2.使用window.reload( ) 或 router.go(0),但会使整个浏览器进行重载,页面闪烁. 3.重新调用接口:但性能较差,代码冗长. 4.provide / inject :(推荐) 点此查看VUE官方解释: 允许一个祖先组

  • 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 后来发

  • Redis集群新增、删除节点以及动态增加内存的方法

    Redis集群新增、删除节点以及动态增加内存的方法

    目录 一.新增服务节点到集群中 1.创建配置文件 2.启动新的端口 3.将新增的两个端口增加到现有集群中 4.设置从节点 5.设置主节点master 二.删除节点 1.删除从节点 2.删除主节点 三.动态扩容内存 1.动态将7002端口内存从5G提升至10G 一.新增服务节点到集群中 1.创建配置文件 在主机127.0.0.5上创建新端口的配置文件,如之前有端口直接复制之前的配置文件即可.复制完然后修改下配置文件里的端口.内存大小.pid的路径等. cp redis7001.conf redis

  • 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+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

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

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

  • Element ui 下拉多选时新增一个选择所有的选项

    项目里经常会用到,在一个多选下拉框里新增一个选择所有的选项,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"

  • Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    目录 需求说明: 实现步骤: 本文主要讲述:自定义树形控件<el-tree> 需求说明: Element UI 官网提供的树形控件包含基础的.可选择的.自定义节点内容的.带节点过滤的以及可拖拽节点的树形结构 如下: 我想要的效果是支持搜索效果的树,将鼠标悬浮后显示添加修改图标,点击图标后弹出对应页面:并且在每个文件夹前添加自定义图标. 实现效果: 实现步骤: 1.使用插槽(slot) <el-col :span="4" :xs="24"> &

  • Vue + Element UI 实现权限管理系统之菜单功能实现代码

    Vue + Element UI 实现权限管理系统之菜单功能实现代码

    目录 菜单功能实现 菜单接口封装 菜单管理界面 测试效果 源码下载 菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', m

  • Vue+Element ui实现树形控件右键菜单

    Vue+Element ui实现树形控件右键菜单

    本文实例为大家分享了Vue+Element ui实现树形控件右键菜单的具体代码,供大家参考,具体内容如下 需求 实现树形控件右键菜单功能,有添加文件.删除文件.重命名功能 一.按需引入ELEMENTUI组件 按需引入ELEMENTUI组件 二.实现菜单功能 1.TEMPLATE 代码如下(示例): <!-- 树形组件 -->   <el-tree               :data="data"               @node-contextmenu=&q

  • element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    el-tree 单选功能 在日常项目开发中,会经常遇到,树形结构的查询方式,为了快速方便开发,常常会使用到快捷的ui组件去快速搭树形结构,这里我用的是 element ui 中的 el-tree .第一次接触这种功能的时候也是各种网站查询,虽然也都能实现功能,但是都会有一些小问题,就很难受,那么我们废话不多说(好像也说了不少呢),直接上效果. el-tree 单选 html 代码 *** 注: load 和 lazy 属性不是需要的粘贴时请删除.(只有需要懒加载的树才需要,关于怎样构建懒加载树以

随机推荐