elementui 後臺管理系統遇到的問題（二） 樹形控制元件 el-tree

摘要： elementui中樹形控制元件的使用 一、將後臺返回的資料填充到前端控制元件中，需要注意的幾點問題 (1)、el-tree中需要繫結node-key='自定義的id名稱' (2)、在配置data中defaultProps中的屬性時，要按照與後端協商的欄位...

elementui中樹形控制元件的使用

一、將後臺返回的資料填充到前端控制元件中，需要注意的幾點問題

(1)、el-tree中需要繫結node-key='自定義的id名稱'

(2)、在配置data中defaultProps中的屬性時，要按照與後端協商的欄位名稱對稱

(3)、重要 的是要月後端協商返回欄位內容：

協商返回的資料格式（舉例）：

children: Array(6) //與defaultProps中的children對應
menuId: 1 //與node-key對應
name: "運維管理"//與defauktProps中的label欄位相對應；
parentId: 0 //父節點id
path: "/"

二、當前端要將選中的選單項傳入後端的時候，現有的API中當選中父選單時候所有的子選單會checked，但是當該選單下不是選中所有子選單的時候，這時候主選單不會被checked，而API中el-tree的getCheckedKeys()方法只會選中屬性為checked選單的名為 node-key對應的id的集合，這時候有三種方法

(1)、第一種方法：

1、找到專案中的\node_modules\element-ui\lib\element-ui.common.js檔案；

2、搜尋檔案中的TreeStore.prototype.getCheckedNodes方法中的；

if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) {
checkedNodes.push(child.data);
}

3、修改成

if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
checkedNodes.push(child.data);
 }

4、重啟專案

console.log(this.$refs.tree.getCheckedKeys()); //就可以拿到父節點的ID啦

(2)、第二種方法

methods: {
getCheckedNodes() {
var rad=''
var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 獲取當前的選中的資料[陣列] -id, 把陣列轉換成字串
var ridsb = this.$refs.tree.getCheckedNodes()// 獲取當前的選中的資料{物件}
ridsb.forEach(ids=>{//獲取選中的所有的父級id
rad+=','+ids.pid
})
rad=rad.substr(1) // 刪除字串前面的','
var rids=rad+','+ridsa
var arr=rids.split(',')//把字串轉換成陣列
arr=[...new Set(arr)]; // 陣列去重
rids=arr.join(',')// 把陣列轉換成字串
console.log(rids)
}
}

（3)、第三種方法（推薦 ） 官方新出的獲取半選中狀態的方法

let parentArr = this.$refs.tree.getHalfCheckedKeys()//獲取半選中狀態的id
let childArr = this.$refs.tree.getCheckedKeys()//獲取全選中的id
this.addRoleForm.rolePower = parentArr.concat(childArr)//拼接在一起

API解釋相關方法屬性

屬性說明

引數	說明	型別	可選值	預設值
data	展示資料	Array	----	---
empty-text	內容為空的時候展示的文字	String	---	---
node-key	每個樹節點用來作為唯一標識的屬性，整棵樹應該是唯一的	String	---	---
Props	配置選項（見props）	object	---	---
render-after-expand	是否在第一次展開某個樹節點後才渲染其子節點	boolean	---	true
load	載入子樹資料的方法，僅當lazy屬性為true時生效	function(node,resolve)	--	--
default-expand-all	是否預設展開所有節點	boolean	---	---
show-checkbox	節點是否可被選擇	boolean	---	---
accordion	是否每次只打開一個同級樹節點展開	boolean	---	false
indent	相鄰級節點間的水平縮排，單位為畫素	number	---	16

Props

引數	說明	型別	可選值	預設值
label	指定節點標籤為節點物件的某個屬性值	String，function(data,node)	--	--
children	指定子樹為節點物件的某個屬性值	String	---	---
disabled	指定節點選擇框是否禁用為節點物件的某個屬性值	boolean,function(data,node)	--	--
isLeaf	指定節點是否為葉子節點，僅在指定了 lazy 屬性的情況下生效	boolean,function(data,node)	--	---

更多的方法 詳情ofollow,noindex" target="_blank">http://element.eleme.io/#/zh-CN/component/tree

整個專案的程式碼結構

<template>
<div>
<el-tree :data="data2" show-checkbox node-key="menuId" ref="tree" highlight-current :props="defaultProps" @check='slesCheck'>
</el-tree>
</div>
</template>

<script>
export default {
data() {
return {
data2: [],
defaultProps: {
children: 'children',
label: 'name'
},
};
},
methods: {
getMenu() {
this.$axios.get('menu/queryMenuList').then(res => {
this.data2 = res.data
console.log(res.data)
})
},
slesCheck() {
// this.checkedIds = this.$refs.tree.getCheckedKeys();
// var rad = ''
// var ridsa = this.$refs.tree.getCheckedKeys().join(',') // 獲取當前的選中的資料[陣列] -id, 把陣列轉換成字串
// var ridsb = this.$refs.tree.getCheckedNodes() // 獲取當前的選中的資料{物件}
// ridsb.forEach(ids => { //獲取選中的所有的父級id
//rad += ',' + ids.parentId
// })
// rad = rad.substr(1) // 刪除字串前面的','
// var rids = rad + ',' + ridsa
// this.addRoleForm.rolePower = rids.split(',') //把字串轉換成陣列
// this.addRoleForm.rolePower = [...new Set(this.addRoleForm.rolePower)]; // 陣列去重
// // rids = arr.join(',') // 把陣列轉換成字串
// console.log(this.addRoleForm.rolePower)
let parentArr = this.$refs.tree.getHalfCheckedKeys()
let childArr = this.$refs.tree.getCheckedKeys()
this.addRoleForm.rolePower = parentArr.concat(childArr)
console.log(parentArr)
console.log(childArr)
console.log(this.addRoleForm.rolePower)
},
getMeunList() {
// this.$axios.get('menu/queryMenuIdList?roleId=1').then(res=>
// this.$refs.tree.setCheckedKeys( this.checkedIds); //修改前要先獲取該el-tree的選中狀態
//console.log(res)
// })
}
},

created() {
this.getMenu()
// this.getMeunList()
}
}
</script>
<style>
.el-tree {
margin-top: 60px;
width: 200px;
}
</style>

遺留的問題！！！！

後臺返回的陣列中既有父級選單id又有子選單id，但子選單並不完整的情況下，運用setCheckedKey()方法會將該父級選單下的所有子選單選中，有一個屬性check-strictly（在顯示覆選框的情況下，是否嚴格的遵循父子不互相關聯的做法，預設為 false）但是設定後當子選單數量很多的情況下，體驗很不好，求教各路大神解惑