当前位置:网站首页>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
边栏推荐
- 软件性能测试报告起着什么作用?第三方测试报告如何收费?
- 电脑怎么重装系统后显示器没有信号了
- Common interview questions of operating system:
- G007-hwy-cc-estor-03 Huawei Dorado V6 storage simulator construction
- 我的 Raspberry Pi Zero 2W 折腾笔记,记录一些遇到的问题和解决办法
- Llvm - generate if else and pH
- 码住收藏▏软件测试报告模板范文来了
- MySQL InnoDB transaction
- Crawling fragment of a button style on a website
- Application of skiplist in leveldb
猜你喜欢
Basic operation of sequential stack
Functions (Part I)
asp. Net method of sending mail using mailmessage
On the day of entry, I cried (mushroom street was laid off and fought for seven months to win the offer)
Deep learning - Super parameter setting
Basic operation of circular queue (Experiment)
深度学习——超参数设置
For 22 years, you didn't know the file contained vulnerabilities?
Mysql database explanation (VII)
Detailed explanation of MySQL connection query
随机推荐
Detailed explanation of C language knowledge points -- data types and variables [1] - carry counting system
ffmpeg安装遇错:nasm/yasm not found or too old. Use --disable-x86asm for a crippled build.
Nuxt project: Global get process Env information
PSYNC synchronization of redis source code analysis
通过 PDO ODBC 将 PHP 连接到 MySQL
kubernetes之常用Pod控制器的使用
群体智能自主作业智慧农场项目启动及实施方案论证会议
Explanation of redis database (III) redis data type
asp. Net method of sending mail using mailmessage
Tun model of flannel principle
深度学习——超参数设置
Node.js ODBC连接PostgreSQL
Ffmpeg installation error: NASM / yasm not found or too old Use --disable-x86asm for a clipped build
Node. JS ODBC connection PostgreSQL
Leetcode学习计划之动态规划入门day3(198,213,740)
What role does the software performance test report play? How much is the third-party test report charged?
TLS / SSL protocol details (30) RSA, DHE, ecdhe and ecdh processes and differences in SSL
TLS / SSL protocol details (28) differences between TLS 1.0, TLS 1.1 and TLS 1.2
For 22 years, you didn't know the file contained vulnerabilities?
How to test mobile app?