網站首頁 編程語言 正文
el-tree
在編輯中回顯數據時,有一個bug,就是只要我們回顯的數據中有父節點的 id
,不管當前父節點下的子節點是部分選中還是全選中,回顯的效果是該父子節點下的子節點都會全選中,這很顯然不是我們需要的
看大家有用自己的辦法解決,比如有說用 check-strictly
來控制父子互不互相關聯的做法,還有自己手動寫函數來控制父子節點的選中狀態,但是方法多感覺很繁瑣。
我這里用 getNode()
的方法來簡單解決
預計的效果
目前實際效果
先上代碼看如何實現
template 部分
<el-tree
:data="list.data"
show-checkbox
node-key="id"
:props="defaultProps"
:default-expand-all="list.isExpand"
v-loading="list.loading"
ref="tree"
@check-change="checkChange">
</el-tree>
js 部分
export default {
data () {
return {
list: {
data: [],
loading: false,
isExpand: true
},
defaultProps: {
children: 'children',
label: 'name'
},
loading:false
}
},
methods: {
defaultChecked () { // 默認選中
this.$nextTick(() => {
const arr = []
this.menus.forEach(item => {
if (!this.$refs.tree.getNode(item.id).childNodes || !this.$refs.tree.getNode(item.id).childNodes.length) {
arr.push(item.id)
}
})
this.$refs.tree.setCheckedKeys(arr)
})
},
}
}
解析:this.menus
是從后端獲取回來的數據,getNode()
獲取到當前節點,判斷當前節點是否是葉子節點,是的話存入 arr
數組中,最后使用 setCheckedKeys()
將數據回顯選中,從而實現父級的半選狀態
打印了一下Node 節點
原文鏈接:https://blog.csdn.net/qq_38157825/article/details/114932987
- 上一篇:沒有了
- 下一篇:沒有了
相關推薦
- 2023-03-13 React中如何設置多個className_React
- 2023-02-26 詳解flutter如何實現局部導航管理_Android
- 2022-07-27 Python中的collections集合與typing數據類型模塊_python
- 2023-04-01 Android自定義View實現LayoutParams的方法詳解_Android
- 2022-08-01 Python3?中return和yield的區別_python
- 2022-04-07 淺談C++11中=delete的巧妙用法_C 語言
- 2022-06-10 C#關鍵字Check簡單介紹_C#教程
- 2023-10-15 lua 如何在嵌入式Linux中與c語言結合
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支