zoukankan      html  css  js  c++  java
  • iView的tree组件实现单选功能

    iView中的树组件有复选框可以多选,但是目前还没有提供单选框的模式,不显示复选框可以提供高亮单选的模式,但是再次点击就被取消了,没有实现真正的单选;

    tree 的属性配置中 multiple 是否支持多选,是在不显示复选框的时候生效的,不能控制复选框支不支持多选;

    实现单选功能中用到了:

    :show-checkbox="true"  // 是否显示复选框
    :check-strictly="true" // 显示复选框的前提下,是否让父子节点不联动
    :check-directly="true" // 在显示复选框的前提下,让节点的选中触发复选框的选中
    @on-check-change="treeChange"  // 复选框被选中的时候触发,可能是点击复选框的时候被选中,也可能是点击节点的时候被选中;返回 当前已勾选节点的数组、当前项

    使用 getSelectedNodes() 获取被选中的节点数组,getSelectedNodes()[0] 获得被选中节点的数据

    视图、逻辑、样式 如下:

     1 <template>
     2 <Tree
     3  ref="orgTree"
     4  :data="orgTree"
     5  :show-checkbox="true"
     6  :check-strictly="true"
     7  :check-directly="true"
     8  @on-check-change="treeChange"
     9  ></Tree>
    10 </template>
    11 
    12 <script>
    13 ...
    14 methods:{
    15     // 树复选框发生改变--只能有一个被选中
    16     treeChange(arr, obj) {
    17       // 清空所有已选中的
    18       arr.forEach(item => {
    19         item.checked = false;
    20       });
    21       // 只选中最后一次选中的
    22       obj.checked = true;
    23     }
    24 }
    25 </script>
    26 
    27 <style>
    28  /* 让方形复选框变成圆形单选框样式,最好在树组件外套一个父盒子,在样式前加父级选择器,以免影响其他树组件*/
    29  .ivu-checkbox-inner {
    30     border-radius: 50%;
    31   }
    32 </style>

    写的比较简单,可能还有不完善的地方,还请各位大佬批评指正

  • 相关阅读:
    【Java】基本类型和引用类型(值传递)
    Linux学习笔记:什么是x86
    Java volatile keyword
    C语言可变參实现參数累加返回
    [Network]Application Layer
    linux下select,poll,epoll的使用与重点分析
    卷积神经网络(CNN)基础介绍
    ScrollView嵌套ExpandableListView显示不正常的问题
    【leetcode】 Unique Binary Search Trees II (middle)☆
    【leetcode】 Unique Binary Search Trees (middle)☆
  • 原文地址:https://www.cnblogs.com/web-xu/p/12085051.html
Copyright © 2011-2022 走看看