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	---	---

Props

参数	说明	类型	可选值	默认值
label	指定节点标签为节点对象的某个属性值	String，function(data,node)	--	--
children	指定子树为节点对象的某个属性值	String	---	---
disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean,function(data,node)	--	--
isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效	boolean,function(data,node)	--	---

更多的方法 详情

element-ui官网

整个项目的代码结构

遗留的问题！！！！后台返回的数组中既有父级菜单id又有子菜单id，但子菜单并不完整的情况下，运用setCheckedKey()方法会将该父级菜单下的所有子菜单选中，有一个属性check-strictly（在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false）但是设置后当子菜单数量很多的情况下，体验很不好，求教各路大神解惑