Element UI Tree 树形控件(可选择),如果子级有值,父级禁用的两种操作

摘要:
总结了两种方法。首先,父项的复选框被禁用˂el-tree:data=“deptOptions”node key=“id”:props=“defaultProps”:单击时展开node=“true”:filter node method=“filterNode”:check restricted=“true”show checkboxxref=“tree”@check=“handleNo

总结了两种方法:

一、父级的复选框禁用

Element UI Tree 树形控件(可选择),如果子级有值,父级禁用的两种操作第1张

 

<el-tree
    :data="deptOptions"
    node-key="id"
    :props="defaultProps"
    :expand-on-click-node="true"
    :filter-node-method="filterNode"
    :check-strictly="true"
    show-checkbox
    ref="tree"
    @check="handleNodeClick"
/>

<script>
    export default{
        data:{
            defaultProps:{
                children:'children',
                label:'name',
                disabled:function(data,node){
                        if(data.children&&data.children.length>0){
                            return true            
                        }else{
                            return false            
                        }
                }    
            }
        },
        methods:{
            handleNodeClick(data,checked, node){
                if(checked){
                    this.$refs.tree.setCheckedNodes([data]);
                }
            },
        }
    }
</script>

二、隐藏父级的复选框,css大法好嘢,真的好嘢

Element UI Tree 树形控件(可选择),如果子级有值,父级禁用的两种操作第2张

<el-tree
  :data="deptOptions"
  node-key="id"
  :props="defaultProps"
  :expand-on-click-node="true"
  :filter-node-method="filterNode"
  :check-strictly="true"
  show-checkbox
  ref="tree"
  @check="handleNodeClick"
/>

<style lang="scss" scoped>
::v-deep .el-tree {
  // 不可全选样式
  .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }
}
</style>

  

免责声明:文章转载自《Element UI Tree 树形控件(可选择),如果子级有值,父级禁用的两种操作》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ZRender源码分析3:Painter(View层)-上win10下安装redis 服务下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

jquery ajax请求后台 的简单例子

jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。 最简单的情况下...

Oracle corrupt block(坏块) 详解

一. 坏块说明 1.1 相关链接 在看坏块之前,先看几个相关的链接,在后面的说明中,会用到链接中的一些内容。 ORA-600 各个参数含义说明 http://blog.csdn.net/tianlesoftware/article/details/6645809 Oracle 不同故障的恢复方案 http://blog.csdn.net/tianlesof...

【原】用Java编写第一个区块链(一)

  写这篇随笔主要是尝试帮助自己了解如何学习区块链技术开发。  【本文禁止任何形式的全文粘贴式转载,本文来自zacky31的随笔】 目标: 创建一个最基本的“区块链” 实现一个简单的挖矿系统 前提: 对面向对象编程有一定的基础 注意: 值得注意的是,这不会是一个完整的功能,恰恰相反,这是一个概念证明的实例,可以帮助您进一步了解区块链。 准备:   我将...

Socket聊天逻辑

         1、A发送消息到服务器          2、服务器接收到消息后会给所有用户发送这条消息          3、如果有用户断开连接,则不用给此用户发送 一、创建持久性连接服务器  net,设置其端口号为9000 const net = require(“net”); const server = net.creatServer(); se...

基于echarts的中国地图

HTML:<div style='100%x;height:600px;'></div>以下是echarts地图相关代码 dataList () {     // 初始化echarts实例     this.chinachart = echarts.init(document.getElementById('china_ma...

ajax jsonp函数调用

jsonp数据 jsonpHandler({name:"liujinyu",age:"24"}) ajax调用 $.ajax({type:'GET',url:"http://10.14.85.90/data/people.html",dataType:'jsonp',cache:true,async:true,//jsonp: "jsonpHandler"...