elementui 后台管理系统遇到的问题(二) 树形控件 el-tree
2019-08-05

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 //父节点idpath: "/"

二、当前端要将选中的菜单项传入后端的时候,现有的API中当选中父菜单时候所有的子菜单会checked,但是当该菜单下不是选中所有子菜单的时候,这时候主菜单不会被checked,而API中el-tree的getCheckedKeys()方法只会选中属性为checked菜单的名为 node-key对应的id的集合,这时候有三种方法

(1)、第一种方法:1、找到项目中的ode_moduleselement-uilibelement-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() //获取半选中状态的idlet childArr = this.$refs.tree.getCheckedKeys() //获取全选中的idthis.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>

遗留的问题!!!!

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