elementui后台管理系统遇到的问题（⼆）树形控件el-tree 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-uimon.js⽂件；
2、搜索⽂件中的CheckedNodes⽅法中的；
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.$CheckedKeys()); //就可以拿到⽗节点的ID啦
(2)、第⼆种⽅法
methods: {
getCheckedNodes() {
var rad=''
var ridsa = this.$CheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
var ridsb = this.$CheckedNodes()// 获取当前的选中的数据{对象}
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.$HalfCheckedKeys()  //获取半选中状态的id
let childArr = this.$CheckedKeys()  //获取全选中的id
lePower = at(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)-----
更多的⽅法详情
整个项⽬的代码结构
<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.$('menu/queryMenuList').then(res => {
this.data2 = res.data
console.log(res.data)
})
},
slesCheck() {
// this.checkedIds = this.$CheckedKeys();
// var rad = ''
// var ridsa = this.$CheckedKeys().join(',') // 获取当前的选中的数据[数组] -id, 把数组转换成字符串
// var ridsb = this.$CheckedNodes() // 获取当前的选中的数据{对象}
// ridsb.forEach(ids => { //获取选中的所有的⽗级id
//    rad += ',' + ids.parentId
// })
// rad = rad.substr(1) // 删除字符串前⾯的','
// var rids = rad + ',' + ridsa
// lePower = rids.split(',') //  把字符串转换成数组
// lePower = [...new Set(lePower)]; // 数组去重
// // rids = arr.join(',') // 把数组转换成字符串
// console.log(lePower)
let parentArr = this.$HalfCheckedKeys()
let childArr = this.$CheckedKeys()
lePower = at(childArr)
console.log(parentArr)
console.log(childArr)
console.log(lePower)
},
getMeunList() {
/
/ this.$('menu/queryMenuIdList?roleId=1').then(res=>
// this.$setCheckedKeys( this.checkedIds); //修改前要先获取该el-tree的选中状态
//    console.log(res)
// })
}
},
created() {
// MeunList()
}
}
</script>
<style>
.el-tree {
margin-top: 60px;
width: 200px;
}
</style>
遗留的问题
后台返回的数组中既有⽗级菜单id⼜有⼦菜单id，但⼦菜单并不完整的情况下，运⽤setCheckedKey()⽅法会将该⽗级菜单下的所有⼦菜单选中，有⼀个属性check-strictly（在显⽰复选框的情况下，是否严格的遵循⽗⼦不互相关联的做法，默认为 false）但是设置后当⼦菜单数量很多的情况下，体验很不好，求教各路⼤神解惑

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。