咨询热线:15565668898 联系人:潜龙军 地址:西藏自治省拉萨市色拉路第六安居园
elementui 后台管理系统遇到的问题(二) 树形控件 el-tree
来源:星投娱乐最新客服 发布时间:2019-11-12 点击量:122
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)但是设置后当子菜单数量很多的情况下,体验很不好,求教各路大神解惑
相关产品
-
徐文光介绍,2016年,衢州深化五水共治,开展“清千塘美百河”大会战,建立河长履职“4+1”机制,狠抓生猪养殖整规,推动垃圾分类处理,加快城镇截污纳管,水环境质量实现6个100%,“清三河”达标县全覆盖。
-
增长迅速的机动车保有量成为大气污染的一大“元凶”。在环保部6日晚举行的大气污染防治媒体见面会上,陈吉宁提供了一组数据:2016年全国机动车保有量已达3亿辆,其中汽车有1.9亿辆。北京31.3%、上海29.2%、杭州28%的细颗粒物均来自机动车。
-
对此,东风汽车公司一位相关人士表示,这意味着东风新能源产品规划已经开始提前,而对于业内猜测的公司是否会在近期公布新能源战略规划一事,其认为还有待观察。另外,有分析认为,这款混动SUV产品的亮相或将成为东风新能源战略的重要转折点。
-
看着孩子的生命在一点点的流失,回想孩子以前的种种,朱小龙的家人毅然做出了一个重要的决定:他们要捐献孩子的器官,他们要让孩子的生命通过另一种方式延续。
-
此外,在电影《Cart》中,都暻秀将会和廉晶雅饰演母子,两人会有怎样的表现,非常值得期待,该片将会在今年11月份正式上映。
-
钟南山:限购、摇号这都是消极的办法,不对症。想办法减少汽车不见得是个最根本的办法,在中国汽车不合格、汽油不合格、第三是尾气的减排不好。汽车尾气如何更有效地过滤,做到低害化。
-
说起初学时的笑话,马树梅至今仍忍不住地“咯咯咯”放声大笑。她说,第一次发球发出去就找不着去向了,手里的拍子也总够不到球,差点没把教练的鼻子气歪了,于是使出连珠弩般的发球法,把球发了个四面开花。“那阵子我哪是学球呀,整个就一捡球的,一堆一堆的羽毛球,满场捡,累得我满头大汗,一边捡着一边想,难道学球也要三年学徒两年献艺?”
-
汽车之家经销商信息显示,福美来M5已经有展车到店,有部分经销商店内有少量现车销售。目前,有些经销商店内还进行“交1元订金抵千元车款”,或购车送装饰的活动。如果您对该车感兴趣,可以查看您附近的经销商咨询了解。
热点资讯
- 湖南的四个县名单一,只有一个县从未成为过州,是你的家乡吗?2019-11-09
- 华为:5G到期时间至少比业内其他公司提前12-18个月2019-11-06
- 笔电代工厂仁宝宣布将联宝股份全数售予联想:作价2.57亿美元2019-06-18
- 收益各不相同《秦始皇OL》各项属性大揭密2019-11-09
- springboot情操陶冶-@Configuration注解解析2019-11-07
- 森马官方店清仓:羽绒服79.9元起大促,休闲鞋76.9元2019-11-12
- c#基础系列2---深入理解String2019-11-05
- 环境健康对健康饮食尘埃的官方跨境智能烹饪领域2019-06-18