iView的tree组件实现单选功能
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组件实现单选功能的更多相关文章
- 【技术博客】使用iview的Tree组件写一棵文件树
本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...
- iView中Tree组件children中动态checked选中后取消勾选再选中无效问题
如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...
- Element-ui tree组件自定义节点使用方法
工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <di ...
- Vue iview Tree组件实现文件目录-高级实现
Tree组件实现文件目录-基础实现 封装文件目录组件 src\views\folder-tree\folder-tree.vue <template> <div class=&quo ...
- Vue iview Tree组件实现文件目录-基础实现
注册页面路由 router/router.js { path: 'folder_tree', name: 'folderTree', component: () => import('@/vie ...
- 【Egret】中tree组件使用案例
Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...
- antd Tree组件中,自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...
- 自定义GrildView实现单选功能
首先看实现功能截图,这是一个自定义Dialog,并且里面内容由GrildView 绑定数据源,实现类似单选功能. 首先自定义Dialog,绑定数据源 自定义Dialog弹出框大小方法 最主要实现的就是 ...
- [置顶] Flex中Tree组件无刷新删除节点
在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...
随机推荐
- vue {{}}的用法
参考链接:https://blog.csdn.net/cofecode/article/details/78666233
- vue-cli2和vue-cli3同时存在
https://blog.csdn.net/Jioho_chen/article/details/90455778 win下 vue-cli2 和 vue-cli3 并存,一起使用开局一张图,内容慢慢 ...
- VBA来实现已存在的数据库,取得所有表的结构
问题描述 用VBA来取出MySQL数据库中的所有表的结构后生成一个Excel的文档 首先创建MySQL的数据源,如何创建数据源在前章已经写过,之后把下面的信息填写上即可 在window7 64位系统上 ...
- zabbix 部署包安装
关于zabbix的安装方式,官网提供了几种方法,分别是:部署包安装.源码安装.容器安装.容器安装我之前已经写过一篇,而现在这一篇是关于部署包安装的. 按照官网的说法,我们需要如下几个步骤: ...
- Hbuider APP打包流程
1,下载HBuilder,注册并登陆.首先打开“文件”-“新建”-“移动APP”,输入“应用名称”,“位置”可以根据需要自己选择即可,“选择模板”建议选择空模板: 2,新建完成后, 在项目管理器会 ...
- [转帖]详解shell脚本括号区别--$()、$「 」、$「 」 、$(()) 、「 」 、「[ 」]
详解shell脚本括号区别--$().$「 」.$「 」 .$(()) .「 」 .「[ 」] 原创 波波说运维 2019-07-31 00:01:00 https://www.toutiao.com ...
- K8S从入门到放弃系列-(3)部署etcd集群
摘要:etcd 是k8s集群最重要的组件,用来存储k8s的所有服务信息, etcd 挂了,集群就挂了,我们这里把etcd部署在master三台节点上做高可用,etcd集群采用raft算法选举Leade ...
- MySQL 数据库连接命令
启动数据库服务 格式: net start 数据库名 net start mysql57 关闭数据库服务 格式: net stop 数据库名 net stop mysql57 链接 ...
- python笔记007-函数
昨日简要: 1.文件操作: 1.1获得句柄: f = open(‘one.txt’,mode=’’,encoding=’utf-8’) f = open(‘../’) à返回上一层 f = open( ...
- 使用内存地址点亮LED—跟51单片机一样写代码教学(初步入门)
51单片机点亮一个小灯 #include <rge52.h> sbit LED = P0^ void main(void) { P0 = 0XFE; // 总线操作 sfr P0 0X80 ...