需求:通过Tree结构,选择菜单的时候只获取最后一级的数据
实现效果:
实现数据结构:
代码:
// HTML
<el-container>
<el-tree
:data="treeData"
show-checkbox
node-key="idCard"
ref="tree"
:default-expanded-keys="[2, 3]"
:default-checked-keys="resourceCheckedKey"
check-on-click-node
:props="defaultProps"
@check-change="handleCheckChange"
>
</el-tree>
</el-container>
// JS
data(){
return{
treeData: null,
defaultProps: {
children: 'children',
id: 'idCard',
label: 'name'
},
openTree: false,
getOpenTree: "",
resourceCheckedKey: []//需要回显的数据
}
}
// 编辑回显
getWindowInfo(ids) {
let id = ids.id
windowInfo(id).then(res => {
this.ruleForm = res.data
if (res.data.winType == 1 || res.data.winType == '1') {
this.openTree = true
} else {
this.openTree = false
}
this.resourceCheckedKey = res.data.consumeUserIdCardList.map((e) => {
return e;
});
});
},
// 开始 树结构 逻辑 ------------------------------------
isOpenTree(val) {
if (val && val == 1) {
this.openTree = true
this.getFindOrganizationAllList()
} else {
this.openTree = false
}
},
// 获取数据
getFindOrganizationAllList() {
let params = {}
findOrganizationAllList(params).then(response => {
this.treeData = response.data
});
},
centerResourceArr() {
const resourceArr = this.$refs.tree.getCheckedNodes().filter(item => {
return !item.children
})
this.datas = resourceArr.map(vls => { //此处为接口需要数据格式
if (!vls.children)
return {
parentId: vls.id,
name: vls.name
}
})
return resourceArr //为最后一级节点node(无子节点)
},
// 结束 树结构 逻辑---------------------------------------
后台返回数据结构
至此就完成了element-ui 使用树结构展示菜单-只获取最后一层数据