当前位置:网站首页>el-tree实现只显示某一级复选框且单选
el-tree实现只显示某一级复选框且单选
2022-04-23 15:24:00 【优雅 的猪】
其实这个东西做出来之后,还是蛮简单的啦。
先说一下实现的思路:
只显示某一级复选框:el-tree中提供了disabled属性,当咱们给某一个节点设置了disabled属性后,那么当前节点就禁用了,所以咱们找到添加disabled的节点复选框的类名,通过display:none隐藏掉就好了,这里我都已经找好了,代码贴在下面。
单选:大家都知道复选框都是多选的,但是需求总是不尽人意,非得单选才行呢,其实也不难。大家在选中之后,拿到当前选中的节点对象,然后重新设置下选中的节点(只设置当前选中的节点,即单选)
关键代码如下:
el-tree: 组件
这里注意最好是都设置node-key 要不然可能会出问题
<el-tree
:data="treeData"
:props="{ children: 'children', label: 'label' }"
show-checkbox
@check-change="checkChange"
ref="Tree"
:check-strictly="true"
node-key="id"
></el-tree>
从后端获取到树形数据之后:
因为我这里需求是只能选择最里层的(也就是没有children的层级)所以采用递归的方式添加disabled属性,没有children的就不添加
// 获取右侧树形数据
getTreeList() {
/**
* ajax 获取到了数据 并 this.treeData = data.data
* 获取到之后
*/
this.setDisabled(this.treeData)
},
// 向有children的节点上增加disabled属性
setDisabled(treeData) {
treeData.forEach(item => {
if(item.children && item.children.length) {
item.disabled = true
this.setDisabled(item.children)
}
})
},
然后css:
这里只要设置这个就可以了,节点上有disabled属性的将不会显示复选框了
/* 隐藏掉el-tree中有disabled属性的框框 */
/deep/.el-checkbox__input.is-disabled{
display: none;
}
然后只能单选:
// 选中复选框触发
checkChange(currObj,isChecked) {
if(isChecked) { // 选中之后我们就重新设置下选中的节点(只设置当前选中的节点,即单选)
this.$refs.Tree.setCheckedNodes([currObj])
}
},
效果:
版权声明
本文为[优雅 的猪]所创,转载请带上原文链接,感谢
https://blog.csdn.net/m0_51431448/article/details/124349108
边栏推荐
- 小红书 timestamp2 (2022/04/22)
- Compiling OpenSSL
- Educational Codeforces Round 127 A-E题解
- Subnet division of flannel principle
- Redis cluster principle
- Openstack command operation
- 免费在upic中设置OneDrive或Google Drive作为图床
- Thinkphp5 + data large screen display effect
- 8.3 language model and data set
- X509 certificate cer format to PEM format
猜你喜欢
Mysql database explanation (IX)
我的 Raspberry Pi Zero 2W 折腾笔记,记录一些遇到的问题和解决办法
X509 certificate cer format to PEM format
How to design a good API interface?
8.3 language model and data set
API gateway / API gateway (II) - use of Kong - load balancing
Lotus DB design and Implementation - 1 Basic Concepts
G007-HWY-CC-ESTOR-03 华为 Dorado V6 存储仿真器搭建
The win10 taskbar notification area icon is missing
Mysql database explanation (10)
随机推荐
UML learning_ Day2
Example of time complexity calculation
Detailed explanation of kubernetes (IX) -- actual combat of creating pod with resource allocation list
async关键字
Share 3 tools, edit 5 works at home and earn more than 400
网站某个按钮样式爬取片段
Redis master-slave synchronization
Llvm - generate if else and pH
如果conda找不到想要安装的库怎么办PackagesNotFoundError: The following packages are not available from current
MultiTimer v2 重构版本 | 一款可无限扩展的软件定时器
填充每个节点的下一个右侧节点指针 II [经典层次遍历 | 视为链表 ]
8.3 language model and data set
fatal error: torch/extension.h: No such file or directory
Detailed explanation of redirection and request forwarding
How to write the keywords in the cover and title? As we media, why is there no video playback
ffmpeg安装遇错:nasm/yasm not found or too old. Use --disable-x86asm for a crippled build.
like和regexp差别
Summary of interfaces for JDBC and servlet to write CRUD
自主作业智慧农场创新论坛
Share 20 tips for ES6 that should not be missed