element-ui中實現tree子節(jié)點部分選中時父節(jié)點也選中
更新時間：2022年08月02日 09:15:11 作者：雅致坊
這篇文章主要介紹了element-ui中實現tree子節(jié)點部分選中時父節(jié)點也選中的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
子節(jié)點部分選中時父節(jié)點也選中
如果需求是：選中任何一個子節(jié)點都默認選擇父節(jié)點，怎么辦？
其實，element-ui也提供了方案，常規(guī)下，如果子節(jié)點選中，那么這時父節(jié)點是半選中狀態(tài)，在獲取選中值時，只需要利用**getHalfCheckedKeys()+getCheckedKeys()**兩個方法即可達到效果。
?let zi = this.$refs.tree.getCheckedKeys()//返回選中子節(jié)點的key ?let fu =this.$refs.tree.getHalfCheckedKeys()//返回選中子節(jié)點的父節(jié)點的key ?let new1 = zi.concat(fu)
el-tree數據回顯時子節(jié)點部分選中,父節(jié)點都全選中的坑
el-tree 在編輯中回顯數據時，有一個bug，就是只要我們回顯的數據中有父節(jié)點的 id，不管當前父節(jié)點下的子節(jié)點是部分選中還是全選中，回顯的效果是該父子節(jié)點下的子節(jié)點都會全選中，這很顯然不是我們需要的
看大家有用自己的辦法解決，比如有說用 check-strictly 來控制父子互不互相關聯的做法，還有自己手動寫函數來控制父子節(jié)點的選中狀態(tài)，但是方法多感覺很繁瑣。
我這里用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() 獲取到當前節(jié)點，判斷當前節(jié)點是否是葉子節(jié)點，是的話存入 arr 數組中，最后使用 setCheckedKeys() 將數據回顯選中，從而實現父級的半選狀態(tài)
打印了一下Node 節(jié)點
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關于如何利用vue控制元素的顯示與隱藏的相關資料,需要的朋友可以參考下2022-12-12
本文主要介紹了element關于table拖拽排序問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
解決elementUI 切換tab后 el_table 固定列下方多了一條線問題
這篇文章主要介紹了解決elementUI 切換tab后 el_table 固定列下方多了一條線問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
axios從功能上來說就是主要用于我們前端向后端發(fā)送請求,是基于http客戶端的promise,面向瀏覽器和nodejs,下面這篇文章主要給大家介紹了關于Vue2中使用axios的3種方法,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了vue實現商品詳情頁功能之商品選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了Vue中v-html圖片過大導致溢出的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue-cli3項目配置eslint代碼規(guī)范的完整步驟
這篇文章主要給大家介紹了關于vue-cli3項目配置eslint代碼規(guī)范的完整步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
本文主要介紹了vue2+tracking實現PC端的人臉識別示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
最近vue.js 非?；馃?，小編也趁機學習了下vuejs的一些基礎知識，于是嘗試做一個像微信平臺里的菜單編輯器功能，下面腳本之家小編把vue.js 微信公眾號菜單編輯器功能的實現代碼分享給大家，需要的朋友參考下2018-05-05
本文通過實例代碼給大家介紹了vue實現評論列表功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-10-10