当前位置:网站首页>The El tree implementation only displays a certain level of check boxes and selects radio
The El tree implementation only displays a certain level of check boxes and selects radio
2022-04-23 15:27:00 【Elegant pig】
In fact, after this thing is made , It's quite simple .
Let's talk about the idea of implementation first :
Show only one level of check boxes :el-tree Provided in disabled attribute , When we set... For a node disabled After attribute , Then the current node is disabled , So let's find and add disabled The class name of the node check box , adopt display:none Just hide it , I've already found it here , The code is posted below .
The radio : You all know that there are many check boxes , But demand is always unsatisfactory , You have to choose a single choice , It's not hard . After the election , Get the currently selected node object , Then reset the selected node ( Only the currently selected nodes are set , Single choice )
The key codes are as follows :
el-tree: Components
Note here that it is best to set node-key Otherwise, something might go wrong
<el-tree
:data="treeData"
:props="{ children: 'children', label: 'label' }"
show-checkbox
@check-change="checkChange"
ref="Tree"
:check-strictly="true"
node-key="id"
></el-tree>
After getting the tree data from the back end :
Because I can only choose the innermost layer here ( No children The hierarchy of ) So add... Recursively disabled attribute , No, children Do not add
// Get the right tree data
getTreeList() {
/**
* ajax Got the data and this.treeData = data.data
* After acquisition
*/
this.setDisabled(this.treeData)
},
// Xiang you children Add... On the node of disabled attribute
setDisabled(treeData) {
treeData.forEach(item => {
if(item.children && item.children.length) {
item.disabled = true
this.setDisabled(item.children)
}
})
},
then css:
Just set this here , There are disabled Property will not display the check box
/* Hide el-tree There is disabled Attribute frame */
/deep/.el-checkbox__input.is-disabled{
display: none;
}
Then you can only choose one :
// Select the check box to trigger
checkChange(currObj,isChecked) {
if(isChecked) { // After selecting, we will reset the selected node ( Only the currently selected nodes are set , Single choice )
this.$refs.Tree.setCheckedNodes([currObj])
}
},
effect :
版权声明
本文为[Elegant pig]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204231523549534.html
边栏推荐
- Sword finger offer (2) -- for Huawei
- 深度学习——超参数设置
- Explanation of redis database (I)
- G007-hwy-cc-estor-03 Huawei Dorado V6 storage simulator construction
- How to use OCR in 5 minutes
- js——实现点击复制功能
- 买卖股票的最佳时机系列问题
- Detailed explanation of C language knowledge points -- first understanding of C language [1] - vs2022 debugging skills and code practice [1]
- Deep learning - Super parameter setting
- 群体智能自主作业智慧农场项目启动及实施方案论证会议
猜你喜欢
Explanation 2 of redis database (redis high availability, persistence and performance management)
My raspberry PI zero 2W tossing notes record some problems encountered and solutions
重定向和请求转发详解
Mysql database explanation (VII)
Sword finger offer (1) -- for Huawei
TLS / SSL protocol details (30) RSA, DHE, ecdhe and ecdh processes and differences in SSL
About UDP receiving ICMP port unreachable
电脑怎么重装系统后显示器没有信号了
On the day of entry, I cried (mushroom street was laid off and fought for seven months to win the offer)
让阿里P8都为之着迷的分布式核心原理解析到底讲了啥?看完我惊了
随机推荐
API gateway / API gateway (II) - use of Kong - load balancing
MySQL installation process (steps for successful installation)
我的 Raspberry Pi Zero 2W 折腾笔记,记录一些遇到的问题和解决办法
调度系统使用注意事项
C语言超全学习路线(收藏让你少走弯路)
如果conda找不到想要安装的库怎么办PackagesNotFoundError: The following packages are not available from current
X509 certificate cer format to PEM format
win10 任务栏通知区图标不见了
T2 icloud calendar cannot be synchronized
What role does the software performance test report play? How much is the third-party test report charged?
Have you really learned the operation of sequence table?
How to test mobile app?
Have you learned the basic operation of circular queue?
Explanation of redis database (IV) master-slave replication, sentinel and cluster
Explanation of redis database (I)
Comparaison du menu de l'illustrateur Adobe en chinois et en anglais
regular expression
JS -- realize click Copy function
Wechat applet customer service access to send and receive messages
Connectez PHP à MySQL via aodbc