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

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

实现单选功能中用到了:

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

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

视图、逻辑、样式 如下:

 <template>
<Tree
ref="orgTree"
:data="orgTree"
:show-checkbox="true"
:check-strictly="true"
:check-directly="true"
@on-check-change="treeChange"
></Tree>
</template> <script>
...
methods:{
// 树复选框发生改变--只能有一个被选中
treeChange(arr, obj) {
// 清空所有已选中的
arr.forEach(item => {
item.checked = false;
});
// 只选中最后一次选中的
obj.checked = true;
}
}
</script> <style>
/* 让方形复选框变成圆形单选框样式,最好在树组件外套一个父盒子,在样式前加父级选择器,以免影响其他树组件*/
.ivu-checkbox-inner {
border-radius: 50%;
}
</style>

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

iView的tree组件实现单选功能的更多相关文章

  1. 【技术博客】使用iview的Tree组件写一棵文件树

    本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...

  2. iView中Tree组件children中动态checked选中后取消勾选再选中无效问题

    如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...

  3. Element-ui tree组件自定义节点使用方法

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~   <template> <di ...

  4. Vue iview Tree组件实现文件目录-高级实现

    Tree组件实现文件目录-基础实现 封装文件目录组件 src\views\folder-tree\folder-tree.vue <template> <div class=&quo ...

  5. Vue iview Tree组件实现文件目录-基础实现

    注册页面路由 router/router.js { path: 'folder_tree', name: 'folderTree', component: () => import('@/vie ...

  6. 【Egret】中tree组件使用案例

    Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...

  7. antd Tree组件中,自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

  8. 自定义GrildView实现单选功能

    首先看实现功能截图,这是一个自定义Dialog,并且里面内容由GrildView 绑定数据源,实现类似单选功能. 首先自定义Dialog,绑定数据源 自定义Dialog弹出框大小方法 最主要实现的就是 ...

  9. [置顶] Flex中Tree组件无刷新删除节点

    在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...

随机推荐

  1. 学习笔记:oracle之win10安装卸载oracle 11gR2步骤及常见问题解决

    1.win10下安装oracle11g 1.1 工具原料 oracle11g安装包(64位) 1.2 步骤方法 1.在Oracle官网下载安装包,下载后,得到的文件如图所示: 2.将两个文件进行解压缩 ...

  2. 2、2 唯一验证,这里我们强调后台的唯一验证&在保存之前进行验证

    后台 —————————————————————————————————————————————— @RequestMapping("/uniqueNameCheck") publ ...

  3. Ctrl+Tab

    很好用的快捷键. 可以在浏览器中自由切换,也可以在编辑器中自由切换.

  4. Linux安装 PostgreSQL

    1.在线安装 yum install postgresql-server -y 2.初始化数据库 service postgresql initdb 3.设置自动启动 hkconfig postgre ...

  5. javaIO -- 流的体系设计思路、基础分类

    一.流 1. 流的含义 在程序设计中,流是对于数据流动传输的一种抽象描述任何有能力产出数据的数据源,或者有能力接受数据的接收端对象都是一个流. 2. 流的源和目的 数据可能从本地文件读取,或者写入,  ...

  6. 项目element-ui checkbox里面获取选中项 实现批量删除 修改

    <el-table :data="tableData" stripe border style="width: 100%" @selection-chan ...

  7. 给初学PHP的学习线路和建议

    直入主题  1.熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作简单的网页,对元素属性相对熟悉. 2.理解动态语言的概念和运做机制,熟悉基本的PHP语法. 3.学习如何将PHP与HTML结 ...

  8. (六)CXF之自定义拦截器

    一.需求分析 客户端在调用服务端的方法时,需要进行用户名和密码验证.此时分为: 客户端请求的时候,要发送用户名密码到服务端 服务端检验用户名密码. 二.案例 前提:本章案例是基于前一章节的例子进一步讲 ...

  9. vue 集成 NEditor 富文本

    下载NEditor 放在  vue 项目下面 public  文件中. 安装    vue-neditor-wrap  执行命令 npm  install  vue-neditor-wrap 代码使用 ...

  10. Java 面向对象(六)接口

    一.接口 接口:是Java语言中一种引用类型,是方法的集合,如果说类的内部封装了成员变量.构造方法和成员方法,那么接口的内部主要就是封装了方法,包含抽象方法(JDK 7及以前),默认方法和静态方法(J ...