element tree树形组件回显数据问题解决

目录
  • 1.当el-tree 从后台拿到数据动态回显展示出来时，只要有一个父节点，则下面的所有子节点全部被勾选了
  • 2.解决方法代码如下
  • 总结

解决vue+element tree组件 回显数据时有一个父节点数据下面子节点就都会被选中

1.当el-tree 从后台拿到数据动态回显展示出来时，只要有一个父节点，则下面的所有子节点全部被勾选了

如图所示：

后台返回的回显数据只有33（父节点组织管理）45（子节点个人管理），但是组织管理下的所有子节点都被回显选中。

2.解决方法代码如下

先在组件上绑定check-strictly属性
check-strictly属性控制是否严格的遵循父子不互相关联的做法，默认为 false
具体参考element官网api。
代码如下（示例）：

<el-tree :data="menuList"
  :props="menuListTreeProps"
          node-key="menuId"
          ref="menuListTree"
          :check-strictly="isCheck"
          show-checkbox>
 </el-tree>
export default {
	data () {
		 isCheck: false,
	}
}

//js操作
//首先先拿到后台返回需要回显的id数组  假如是showData数组
//第一步先设置 check-strictly绑定的属性为true 为了是解除父子节点的关联（意思就是点击勾选父节点的时候下边的所有子节点都不会选中。）
//第二步设置回显 使用element Api的setCheckedKeys（showData）方法进行设置
//最后回显成功之后通过$nextTick异步方法再把check-strictly绑定的属性值设置为false。（一定要有这步操作，不设置的话，勾选父节点子节点不会被勾选中）
//具体代码如下 :
this.isCheck= true //重点：回显之前一定要设置为true
this.$nextTick(()=>{
	this.$refs.menuListTree.setCheckedKeys(这里写接口获取的数据) //给树节点赋值回显
    this.isCheck= false //重点： 赋值完成后 设置为false
})

这样问题就解决了。

总结

总而言之需要多了解element提供的api方法以及属性的作用，到此这篇关于element tree树形组件回显数据问题解决的文章就介绍到这了,更多相关element tree树形组件回显内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解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="

  • vue elementUI tree树形控件获取父节点ID的实例

    首先找到element-ui.common.js文件 如下 具体看你工程下的node_modules D:\workSpace\vue_manage\node_modules\element-ui\lib\element-ui.common.js 找到getCheckedNodes该方法 细节如下我的该方法在21618行 TreeStore.prototype.getCheckedNodes = function getCheckedNodes() { var leafOnly = argume

  • python ElementTree 基本读操作示例

    示例可以附件中下载 1.加载xml文件 加载XML文件共有2种方法,一是加载指定字符串,二是加载指定文件 2.获取element的方法 a) 通过getiterator b) 过 getchildren c) find方法 d) findall方法 示例如下: 复制代码 代码如下: #-*- coding:utf-8 -*- from xml.etree import ElementTree def print_node(node): '''''打印结点基本信息''' print "======

  • vue2.0基于vue-cli+element-ui制作树形treeTable

    该组件基于技术栈,主要涉及vue-cli生成的webpack项目脚手架,在此脚手架项目基础上完成的,整合了element-ui开源vue的UI项目 1.vue-cli的安装使用 npm install -g vue-cli 全局安装vue-cli之后,使用该脚手架的相关命令,可快速生成一个比较规范的vue项目结构 vue init <template-name> <project-name> 例子 vue init webpack treeTable 这样一个快速的项目结构生成,如

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

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

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

  • python通过ElementTree操作XML获取结点读取属性美化XML

    1.引入库需要用到3个类,ElementTree,Element以及建立子类的包装类SubElement from xml.etree.ElementTree import ElementTreefrom xml.etree.ElementTree import Elementfrom xml.etree.ElementTree import SubElement as SE 2.读入并解析tree = ElementTree(file=xmlfile)root = tree.getroot()

  • Python中使用ElementTree解析XML示例

    [XML基本概念介绍] XML 指可扩展标记语言(eXtensible Markup Language). XML 被设计用来传输和存储数据. 概念一: 复制代码 代码如下: <foo>      # foo元素的起始标签  </foo>     # foo元素的结束标签             # note: 每一个起始标签必须有对应的结束标签来闭合, 也可以写成<foo/> 概念二: 复制代码 代码如下: <foo>           # 元素可以嵌套

  • vue.js element-ui tree树形控件改iview的方法

    vue.js element-ui tree树形控件改iview的方法

    element-ui组件的tree树形控件修改源码改为iview组件 实现原理 修改了element-ui源码,把源码里面的tree模块提取出来 然后修改element自带checkbox等组件为iview的checkbox,并且兼容方法 最后修改element样式,改为iview风格,自己也添加了一些样式 新的tree组件可以说是element的逻辑,iview的风格 <template> <div @click.stop="handleClick" v-show=

随机推荐