網(wǎng)站首頁 編程語言 正文
element-ui中 tree
樹形控件的相關功能,演示圖:
代碼部分:
<div>
<el-button type="primary" size="mini" @click="expand">展開/折疊</el-button>
<el-button type="primary" size="mini" @click="checkAll">全選</el-button>
<el-button type="primary" size="mini" @click="checkNot">全不選</el-button>
</div>
<el-tree
:data="list"
show-checkbox
node-key="id"
:props="defaultProps"
check-on-click-node
:default-expand-all="isExpand"
ref="tree"
@check-change="checkChange">
</el-tree>
js相關:
export default {
data () {
return {
list: [],
isExpand: true
}
},
methods: {
expand () { // 展開/折疊
this.isExpand = !this.isExpand
const nodes = this.$refs.tree.store._getAllNodes()
// 或者方法二
// const nodes = this.$refs.tree.store.nodesMap
for (let i in nodes) {
nodes[i].expanded = this.isExpand
}
},
checkAll () { // 全選
this.$refs.tree.setCheckedNodes(this.list)
// 或者方法二
// this.list.forEach(item => {
// this.$refs.tree.setCheckedKeys([item.id])
// })
},
checkNot () { // 全不選
this.$refs.tree.setCheckedKeys([])
},
}
補充:全選/不全選可以使用一個 checkbox
實現(xiàn),就不用兩個函數(shù)啦
原文鏈接:https://blog.csdn.net/qq_38157825/article/details/114657476
- 上一篇:沒有了
- 下一篇:沒有了
相關推薦
- 2023-05-29 Postgresql數(shù)據(jù)庫角色創(chuàng)建登錄詳解_PostgreSQL
- 2022-03-03 CSS樣式修改不換行顯示省略號及多行顯示省略號
- 2022-08-19 element-plus中的el-select回顯錯誤如何解決?
- 2024-07-15 使用itext導出pdf出現(xiàn)的中文無法顯示的問題
- 2022-07-02 ansible模塊之include_tasks:為什么加了tags后導入的任務沒有執(zhí)行?
- 2023-07-28 vw 彈性布局解決方案
- 2022-09-19 Python+LyScript實現(xiàn)自定義反匯編_python
- 2022-03-27 Android實現(xiàn)圓形菜單懸浮窗_Android
- 欄目分類
-
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學習環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結構-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支