vue+element UI 當前節點的向上所有父節點全部勾選，向下的所有子節點不進行勾選，并在文本框進行展示勾選內容，勾選時并隱藏下拉框
項目當中的需求實現自定義勾選樹，當選擇子節點的時候，當前節點的向上所有父節點全部勾選，向下的所有子節點不進行勾選，并在文本框進行展示勾選內容，勾選時并隱藏下拉框，鼠標放置文本框，出現清除按鈕，點擊清楚文本并重置樹，并且需要記錄當前勾選的標識，名稱等節點信息。后端返回的樹節點信息，到底有幾層未知，數據量到底有多大未知。
項目環境：vue+element UI 樹（el-tree）
<el-form
class="sarch_container mt30"
label-width="70px"
label-position="left"
:model="formLabelAlign"
@submit.native.prevent
>
<el-form-item label="上級標簽：" class="sarch_form_item">
<el-select v-model="formLabelAlign.parentTag" placeholder="請選擇上級標簽" ref="sarchTree" clearable @change="sarchTagChange()">
<el-option class="select_tree_item" :value="prevTagArr">
<el-tree
:data="prevTagArr"
show-checkbox
ref="tagTree"
node-key="code"
check-strictly
@check="checktagTreeNode"
>
</el-tree>
</el-option>
</el-select>
</el-form-item>
</el-form>
data
prevTagArr:[{"code":"0jdGu33w","label":"data","pcode":"0","children":[]},{"code":"1212DWE","label":"home","pcode":"0","children":[{"code":"12345678","label":"tmp","pcode":"1212DWE","children":[{"code":"2BkCxUst","label":"room","pcode":"12345678","children":[{"code":"3FDZUkFF","label":"ui","pcode":"2BkCxUst","children":[{"code":"4J6rg1Wi","label":"ombs","pcode":"3FDZUkFF","children":[{"code":"4WlSEliD","label":"zip","pcode":"4J6rg1Wi","children":[]},{"code":"5dLPYAKR","label":"jar_11","pcode":"4J6rg1Wi","children":[]},{"code":"66666666","label":"jdk","pcode":"4J6rg1Wi","children":[]}]}]}]},{"code":"2tmt60KC","label":"啥","pcode":"12345678","children":[{"code":"jiUUyeVB","label":"滴滴222","pcode":"2tmt60KC","children":[]}]},{"code":"o9kZORnc","label":"321122","pcode":"12345678","children":[]}]},{"code":"opt9nnvx","label":"000","pcode":"1212DWE","children":[{"code":"rxVDK1bS","label":"啥也不是2456","pcode":"opt9nnvx","children":[]}]}]},{"code":"7Y837XwW","label":"lrzsz","pcode":"0","children":[{"code":"7YFmAEua","label":"xuyue","pcode":"7Y837XwW","children":[{"code":"v86YirXW","label":"666","pcode":"7YFmAEua","children":[]}]},{"code":"88888877","label":"util","pcode":"7Y837XwW","children":[]},{"code":"88888888","label":"mysql","pcode":"7Y837XwW","children":[]},{"code":"f25CZrGh","label":"112","pcode":"7Y837XwW","children":[]},{"code":"icvHZwu9","label":"3","pcode":"7Y837XwW","children":[]}]},{"code":"97m0mjdG","label":"Memory","pcode":"0","children":[{"code":"5pwzFNMJ","label":"滴滴2","pcode":"97m0mjdG","children":[]},{"code":"ALCGyCwE","label":"zookeeper","pcode":"97m0mjdG","children":[]},{"code":"CbdHmPvZ","label":"zookeeper_1","pcode":"97m0mjdG","children":[]},{"code":"EQvYrT5Q","label":"zookeeper-2","pcode":"97m0mjdG","children":[]}]},{"code":"FEC4qQso","label":"kafka","pcode":"0","children":[{"code":"FEDGTDD","label":"kafka_1.1.0","pcode":"FEC4qQso","children":[]},{"code":"FkWmcd76","label":"kafka_1.2.0","pcode":"FEC4qQso","children":[]},{"code":"FpaIACtO","label":"kafka_1.3.0","pcode":"FEC4qQso","children":[]},{"code":"H35AhEz5","label":"kafka_1.4.0","pcode":"FEC4qQso","children":[]}]},{"code":"HFvnIoYW","label":"reids","pcode":"0","children":[{"code":"HYGYK12","label":"bin","pcode":"HFvnIoYW","children":[]},{"code":"Iq0k9j3x","label":"config","pcode":"HFvnIoYW","children":[]},{"code":"Iw4W08Vo","label":"redis-1","pcode":"HFvnIoYW","children":[]},{"code":"JUHUG12","label":"redis-2","pcode":"HFvnIoYW","children":[]}]},{"code":"JuqP37K6","label":"tmp","pcode":"0","children":[{"code":"KIUJYHYG","label":"ombs","pcode":"JuqP37K6","children":[]},{"code":"KRm2ikmG","label":"優化新增","pcode":"JuqP37K6","children":[]},{"code":"L5N1rj6B","label":"other1","pcode":"JuqP37K6","children":[]},{"code":"LVSFUYC1","label":"other2","pcode":"JuqP37K6","children":[]},{"code":"M1X8WsAn","label":"other3","pcode":"JuqP37K6","children":[]}]},{"code":"MyF62Y7t","label":"abc","pcode":"0","children":[{"code":"N9DV6UTq","label":"1","pcode":"MyF62Y7t","children":[]},{"code":"PEOl1tIn","label":"2","pcode":"MyF62Y7t","children":[]},{"code":"PtaCsEts","label":"3","pcode":"MyF62Y7t","children":[]},{"code":"S059eM3E","label":"4","pcode":"MyF62Y7t","children":[]}]},{"code":"Sc667jBt","label":"eer","pcode":"0","children":[{"code":"T46Vbb92","label":"ety","pcode":"Sc667jBt","children":[]},{"code":"Uq85P8Rx","label":"etc","pcode":"Sc667jBt","children":[]},{"code":"Vg6CZSHX","label":"etx","pcode":"Sc667jBt","children":[{"code":"VxAzp1sZ","label":"etx-1","pcode":"Vg6CZSHX","children":[]},{"code":"W91vdDph","label":"etx-2","pcode":"Vg6CZSHX","children":[]}]}]},{"code":"UXNBbWlO","label":"b","pcode":"0","children":[]},{"code":"YGYFJUJJ","label":"ux","pcode":"0","children":[{"code":"YRHHTFS","label":"uxl","pcode":"YGYFJUJJ","children":[]},{"code":"aHNFpT6b","label":"uxp","pcode":"YGYFJUJJ","children":[]},{"code":"acg9RvHM","label":"uxe","pcode":"YGYFJUJJ","children":[]},{"code":"bYVpAJFU","label":"uxa","pcode":"YGYFJUJJ","children":[]},{"code":"dUdlXsni","label":"uxgd","pcode":"YGYFJUJJ","children":[]},{"code":"kjELWFVz","label":"uxmm","pcode":"YGYFJUJJ","children":[{"code":"mWcbjjUr","label":"uxmmr","pcode":"kjELWFVz","children":[]},{"code":"o6FcMyct","label":"uien","pcode":"kjELWFVz","children":[]},{"code":"oBtgdEau","label":"uieef","pcode":"kjELWFVz","children":[]}]}]},{"code":"mlS85xh6","label":"uie","pcode":"0","children":[]},{"code":"oMt8FkPv","label":"puyo","pcode":"0","children":[{"code":"r9GmZUn9","label":"pugf","pcode":"oMt8FkPv","children":[]},{"code":"v0qvhQW2","label":"punu","pcode":"oMt8FkPv","children":[]},{"code":"wu2UeRMf","label":"puer","pcode":"oMt8FkPv","children":[]},{"code":"xKilTar4","label":"pugh","pcode":"oMt8FkPv","children":[]}]}],
formLabelAlign: {
parentTagCode:'',
parentTag: "",
tagName: ""
},
prevCheckNode:[],//存儲樹節點
prevCheckName:[],//存儲樹名稱
checkedKeys:[],//暫存選擇的樹節點
checkTreeName:[],//暫存選擇的樹名稱
tpArr:''
methods
checktagTreeNode: function (a, b) {
const _self=this
var resArr=[];//所有的code label 集成數組
_self.getTagMap(_self.prevTagArr,resArr);
//初始化各數據開始
_self.checkedKeys=[]
_self.checkTreeName=[]
_self.formLabelAlign.parentTag=''
_self.formLabelAlign.parentTagCode=''
//初始化各數據結束
// debugger
if(_self.prevCheckNode.length){//判斷是否是選擇過樹之后的點擊
let booFlag=true//判斷是否是第二次點擊取消選擇標記
_self.prevCheckNode.forEach(ele => {//遍歷存儲的樹節點
if(ele === a.code){//判斷節點相同說明是第一個父節點
_self.$nextTick(() => {
_self.$refs.tagTree.setCheckedKeys([]);//樹選擇滯空
});
_self.prevCheckNode=[]//節點存儲滯空
_self.prevCheckName=[]//節點名稱存儲滯空
_self.formLabelAlign.parentTag=''//select下拉滯空
_self.formLabelAlign.parentTagCode=''
booFlag = false//修改標記
}
})
if(booFlag){//判斷標記true說明雖然第二次點擊，但是不是取消選擇，只是修改選擇節點
if (b.checkedKeys.length > 0) {//判斷節點選擇樹大于零說明是修改
if(a.pcode === '0'){//第一子結點后端返回pcode父節點為'0'，作為判斷依據
_self.checkedKeys=[a.code]//將當前節點存儲
_self.checkTreeName=[a.label]//將當前節點名稱存儲
_self.$nextTick(() => {
_self.$refs.tagTree.setCheckedKeys(_self.checkedKeys);//設置勾選節點
});
}else{//否則說明當前節點是勾選節點
_self.checkedKeys=[a.code,a.pcode]//存儲父節點和當前節點code
_self.checkTreeName=[a.label]//存儲當前節點名稱
_self.checkPcode(resArr,a)//對冒泡排序重組map進行對比存儲當前節點向上所有父節點的名稱和節點code
_self.$nextTick(() => {
_self.$refs.tagTree.setCheckedKeys(_self.checkedKeys);//設置樹選擇
});
}
}
_self.prevCheckNode=_self.checkedKeys//存儲節點
_self.prevCheckName=_self.checkTreeName//存儲節點名稱
for (let i = _self.prevCheckName.length - 1; i >= 0; i--) {//存儲時父節點在后，所以倒序遍歷并給到select
_self.formLabelAlign.parentTag += `/${_self.prevCheckName[i]}`
}
}
_self.$refs.sarchTree.blur()//調用select blur()方法隱藏select
}else{//說明時第一次進行選擇樹節點
if (b.checkedKeys.length > 0) {//判斷節點選擇樹大于零說明是修改
if(a.pcode === '0'){//第一子結點后端返回pcode父節點為'0'，作為判斷依據
_self.checkedKeys=[a.code]//將當前節點存儲
_self.checkTreeName=[a.label]//將當前節點名稱存儲
_self.$nextTick(() => {
_self.$refs.tagTree.setCheckedKeys(_self.checkedKeys);//設置勾選節點
});
}else{//否則說明當前節點是勾選節點
_self.checkedKeys=[a.code,a.pcode]//存儲父節點和當前節點code
_self.checkTreeName=[a.label]//存儲當前節點名稱
_self.checkPcode(resArr,a)//對冒泡排序重組map進行對比存儲當前節點向上所有父節點的名稱和節點code
_self.$nextTick(() => {
_self.$refs.tagTree.setCheckedKeys(_self.checkedKeys);//設置樹選擇
});
}
}
_self.prevCheckNode=_self.checkedKeys//存儲節點
_self.prevCheckName=_self.checkTreeName//存儲節點名稱
for (let i = _self.prevCheckName.length - 1; i >= 0; i--) {//存儲時父節點在后，所以倒序遍歷并給到select
_self.formLabelAlign.parentTag += `/${_self.prevCheckName[i]}`
}
_self.$refs.sarchTree.blur()//調用select blur()方法隱藏select
}
_self.formLabelAlign.parentTagCode=a.code
},
checkPcode(a,b){//檢查當前節點的向上父節點，冒泡遍歷存儲
let _self=this
if(b.pecode !== '0'){
a.forEach(i => {
if(i.code === b.pcode){
_self.checkedKeys.push(i.code)
_self.checkTreeName.push(i.label)
_self.checkPcode(a,i)
}
})
}
},
sarchTagChange(){//清空select時清空樹和對應存儲內容
let _self=this
if(this.formLabelAlign.parentTag === ''){
_self.$nextTick(() => {
_self.$refs.tagTree.setCheckedKeys([]);
});
_self.prevCheckNode=[]
_self.prevCheckName=[]
_self.formLabelAlign.parentTagCode=''
}
},
getTagMap(tdata,resData){//冒泡遍歷后端json數據，存儲方便使用的數據
let _self=this
if(Array.isArray(tdata) && tdata.length>0){
tdata.forEach(function(v,i){
var newValue={
'code':v.code,
'label':v.label,
'pcode':v.pcode
};
resData.push(newValue)
_self.getTagMap(v.children,resData);
});
}
},
版權聲明：本文為weixin_41628411原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
智能推薦
Vue + element-ui 分頁回顯、勾選回顯
使用element - ui分頁組件和table表格，對勾選中的數據進行分頁回顯（上頁選中，點擊分頁后再次返回頁面，勾選中的數據依舊被勾選） 先看看效果 僅為前端模擬數據處理，希望能給你一些啟發 這是引入的組件結構 直接引用也可以使用 定義表數據 這里的tableData為前端模擬數據，為了實現類似后端返回的結果，注意：此列表不是渲染列表，如果你有后端給你返回數據，那這個定義可以省略。 showT...
element-ui中table分頁勾選和反顯demo
需求說明，插件存在必選項，不可刪除，可以選擇版本 下圖是此demo的效果圖 測試過程： ①多頁勾選插件和其版本 ②依次點擊保存、清空、反顯，可測相關功能 下面附上完整代碼，其中有部分注釋...
freemarker + ItextRender 根據模板生成PDF文件
1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件 其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件； 還有一個問題至今沒有解決，就是關于生成PDF文件...
電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！
Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。 如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...
猜你喜歡
requests實現全自動PPT模板
http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載 訪問這個主頁，我們可以看到下面的樣式 點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址 點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包 那我們就開始做吧 首先，查看網頁的源代碼，我們可以看到每一...
Linux C系統編程-線程互斥鎖（四）
互斥鎖 互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。 互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...
統計學習方法 - 樸素貝葉斯
引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。 貝葉斯模型 生成模型與判別模型 判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。 生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...
styled-components —— React 中的 CSS 最佳實踐
https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種，它既具備了 css-in-js 的模塊化與參數化優點，又完全使用CSS的書寫習慣，不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫，首先總結了前端組件化樣式中的最佳實踐原則，然后在此基...
