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

目录
  • 子节点部分选中时父节点也选中
  • el-tree数据回显时子节点部分选中,父节点都全选中的坑
    • 我这里用getNode()的方法来简单解决

子节点部分选中时父节点也选中

如果需求是：选中任何一个子节点都默认选择父节点，怎么办？

其实，element-ui也提供了方案，常规下，如果子节点选中，那么这时父节点是半选中状态，在获取选中值时，只需要利用**getHalfCheckedKeys()+getCheckedKeys()**两个方法即可达到效果。

 let zi = this.$refs.tree.getCheckedKeys()//返回选中子节点的key
 let fu =this.$refs.tree.getHalfCheckedKeys()//返回选中子节点的父节点的key
 let new1 = zi.concat(fu)

el-tree数据回显时子节点部分选中,父节点都全选中的坑

el-tree 在编辑中回显数据时，有一个bug，就是只要我们回显的数据中有父节点的 id，不管当前父节点下的子节点是部分选中还是全选中，回显的效果是该父子节点下的子节点都会全选中，这很显然不是我们需要的

看大家有用自己的办法解决，比如有说用 check-strictly 来控制父子互不互相关联的做法，还有自己手动写函数来控制父子节点的选中状态，但是方法多感觉很繁琐。

我这里用getNode()的方法来简单解决

预计的效果

目前实际效果

先上代码看如何实现

template 部分

 <el-tree
   :data="list.data"
   show-checkbox
   node-key="id"
   :props="defaultProps"
   :default-expand-all="list.isExpand"
   v-loading="list.loading"
   ref="tree"
   @check-change="checkChange">
 </el-tree>

js 部分

export default {
  data () {
    return {
      list: {
        data: [],
        loading: false,
        isExpand: true
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading:false
    }
  },
  methods: {
    defaultChecked () { // 默认选中
      this.$nextTick(() => {
        const arr = []
        this.menus.forEach(item => {
          if (!this.$refs.tree.getNode(item.id).childNodes || !this.$refs.tree.getNode(item.id).childNodes.length) {
            arr.push(item.id)
          }
        })
        this.$refs.tree.setCheckedKeys(arr)
      })
    },
  }
}

解析：this.menus 是从后端获取回来的数据，getNode() 获取到当前节点，判断当前节点是否是叶子节点，是的话存入 arr 数组中，最后使用 setCheckedKeys() 将数据回显选中，从而实现父级的半选状态

打印了一下Node 节点

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

赞 (0)

相关推荐

  • 详解如何实现Element树形控件Tree在懒加载模式下的动态更新

    Element提供的Tree树形控件,可以用清晰的层级结构展示信息,还可以展开或折叠.Tree支持两种加载模式:一次性加载全部树节点和懒加载模式.所谓懒加载模式,是指当需要展开父节点时才渲染子节点.懒加载模式的应用场景适合树节点数据量大的情形,在一定程度上可以优化图形用户界面的响应效率以及提升用户体验.但是,懒加载模式对数据动态刷新应用需求的支持不尽如意.树形控件节点一旦展开就缓存在本地,后续不会再继续更新和刷新节点数据.本文将介绍如何实现Element树形控件Tree在懒加载模式下的动态更新.

  • 基于ElementUI中Table嵌套实现多选的示例代码

    基于ElementUI中Table嵌套实现多选的示例代码

    前言: 写这个是因为帮朋友修改项目中的bug 我也是第一次写这个功能,有不对的希望大家指正,如果看完有帮助点个赞! 代码中关键是js中Tree的路径查找这个核心,有不懂的自行百度 多了不说了,有需要的可以私信找我要代码,来看下我怎么实现的 思路: 从头开始看这个需求,我们需要知道用到哪写东西 1.表格Table 2.多选&全选 3.嵌套数据(下拉操作) 正好我们可以找下ElementUI官方文档 找到了我们需要用到的API 在嵌套数据的时候需要使用tree-props 选中数据的时候使用togg

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

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

  • element的el-tree多选树(复选框)父子节点关联不关联

    element的el-tree多选树(复选框)父子节点关联不关联

    属性check-strictly 官方文档提供属性check-strictly,在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false. 而此属性的意思是: 默认false,父子关联.有如下现象及问题: 1.当你通过函数设置勾选节点的时候,只要父节点被勾选子节点必会勾选上,即便设置勾选的list中无此子节点. 2.当你点击勾选复选框时候,若点击父节点,其下子节点全部统一跟随父节点变化:若点击子节点,子节点部分勾选时父节点处于半选状态,子节点全部勾选时父节点选中,子节点全部不

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

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

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

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

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

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

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • element UI中在 el-select 与 el-tree 结合组件实现过程

    前言 项目上实现某个功能,使用到了 el-select 和 el-tree 组合实现,记录下两者结合的实现过程. 要求根据项目接口提供的数据,el-tree 里的数据是一次性返回来的,点击最后一层级时,请求接口,在点击层级下方追加数据追加的数据要显示勾选框,可进行勾选,且是单选勾选后需要返回勾选的层级以及它的父级 实现效果如下: 数据回显效果: 实现关键部分 el-tree里的显示勾选框不符合当前“追加的数据要显示勾选框,可进行勾选”这个需求,所以我修改了el-tree的源码进行使用. 追加子级

  • Web Components实现类Element UI中的Card卡片

    Web Components实现类Element UI中的Card卡片

    目录 引言 Web Components 核心组成 1. Custom Elements 2. Shadow DOM 3. templates 和 slots 完整代码 Web Components vs Vue Components Web Components 生命周期回调函数 优点 and 缺点 七.基于web components的框架 引言 Web Components 是一个浏览器原生支持的组件化方案,允许你创建新的自定义.可封装.可重用的HTML 标记.不用加载任何外部模块,直接就

  • Element UI中table单元格合并的解决过程

    Element UI中table单元格合并的解决过程

    目录 引言 解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结 引言 项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.

  • 关于element ui中el-cascader的使用方式

    目录 element ui中el-cascader使用 例→ 代码 element中el-cascader使用及自定义key名 element ui中el-cascader使用 要想实现进入页面直接选中选择器中的选项 例→ 那v-model绑定的值必须是数组形式的!!(element ui官方文档中没提到这一点好像,我也是试了很多次才发现的) 代码 <el-form-item label="分类:" prop="region" class="regi

  • Element UI中v-infinite-scroll无限滚动组件使用详解

    目录 一.v-infinite-scroll无限滚动组件使用详解 二.组件无限加载原因及解决方式 三.总结 总结 一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法 2.infinite-scroll-disabled //是否禁用无限滚动加载 3.infinite-scroll-delay //节流时延,单位为ms 4.infinite-scroll-distance //触发加载的距离阈值

  • Easyui Tree获取当前选择节点的所有顶级父节点

    Easyui Tree获取当前选择节点的所有顶级父节点

    只支持四层目录结构,比较笨的一个方法 JS代码 var node = $('#tree').tree('getSelected'); //获取该节点所有父节点 var parentAll = node.text; var flag = ">>"; parentAll = flag.concat(parentAll); var parent = $('#tree').tree('getParent', node.target); if(parent != null &

  • 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

随机推荐