当前位置:网站首页>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
边栏推荐
- UML learning_ Day2
- What is the role of the full connection layer?
- Kubernetes详解(十一)——标签与标签选择器
- 如何设计一个良好的API接口?
- JS -- realize click Copy function
- Detailed explanation of MySQL connection query
- T2 iCloud日历无法同步
- Analysis of common storage types and FTP active and passive modes
- Byte interview programming question: the minimum number of K
- 推荐搜索 常用评价指标
猜你喜欢
推荐搜索 常用评价指标
Nuxt project: Global get process Env information
8.3 language model and data set
Kubernetes详解(九)——资源配置清单创建Pod实战
8.5 concise implementation of cyclic neural network
我的 Raspberry Pi Zero 2W 折腾笔记,记录一些遇到的问题和解决办法
让阿里P8都为之着迷的分布式核心原理解析到底讲了啥?看完我惊了
Openstack command operation
The wechat applet optimizes the native request through the promise of ES6
Functions (Part I)
随机推荐
Tun equipment principle
G007-HWY-CC-ESTOR-03 华为 Dorado V6 存储仿真器搭建
My raspberry PI zero 2W toss notes to record some problems and solutions
Differential privacy (background)
Byte interview programming question: the minimum number of K
Five data types of redis
Have you really learned the operation of sequence table?
The win10 taskbar notification area icon is missing
自主作业智慧农场创新论坛
Kubernetes详解(十一)——标签与标签选择器
Nuxt project: Global get process Env information
For 22 years, you didn't know the file contained vulnerabilities?
Node. JS ODBC connection PostgreSQL
Set onedrive or Google drive as a drawing bed in upic for free
Node.js ODBC连接PostgreSQL
asp. Net method of sending mail using mailmessage
T2 icloud calendar cannot be synchronized
Common types of automated testing framework ▏ automated testing is handed over to software evaluation institutions
After time judgment of date
通過 PDO ODBC 將 PHP 連接到 MySQL