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-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) | -- | --- |
更多的方法 详情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>
