element中el-tree根据后端返回数据，构建父节点半选状态

1、模板:

<el-tree
ref="tree"
class="tree"
:data="permission"
:indent="0"
:empty-text="loading"
show-checkbox
node-key="menuId"
highlight-current
:props="defaultProps"
@check-change="checkChange"
/>

data定义：

data() {
return {
defaultProps: {
children: 'child',
label: 'name'
},
select: [],
permission: [],
roleName: '',
roleList: [],
dialogAddgsVisible: false,
title: '',
checkBoxData: [],
tableKey: 1,
list: null,
}
},

2、
js处理：
2.1 查询出该角色拥有的权限

handleUpdate(val) {
this.dialogAddgsVisible = true
this.title = '编辑下拉选项'
roleDetail(val.roleId).then(response => {
if (response.code === 0) {
this.ruleForm = response.role
this.select = response.role.menuIdList
console.log('==该角色拥有的权限===', this.select)
}
this.setChecked()
})
this.getbList()
},

2.2系统拥有的全部权限

// 获取所有权限
getbList() {
const datas = []
permissionData(this.id).then(response => {
console.log('查看返回数据' + response.code)
this.permission = response.menuList
console.log('查看返回数据的长度', response.menuList)
this.getDataTree(datas)
})
},

2.3将查询到的权限构建为数组

// 构建数组结构
getDataTree(datas) {
datas = this.permission
datas.forEach(ele => {
const parentId = ele.parentId
if (parentId === 0) {
// 不处理
} else {
datas.forEach(d => {
if (d.menuId === parentId) {
let childArray = d.child
if (!childArray) {
childArray = []
}
childArray.push(ele)
d.child = childArray
}
})
}
})
datas = datas.filter(ele => ele.parentId === 0)
this.permission = datas
if (this.permission.length === 0) {
this.loading = '暂无数据'
}
console.log('查看返回数据的长度2：' + this.permission)
},

2.3向el-tree中set选中状态

// 向el-tree中set状态
setChecked() {
console.log('===进入设置状态==', this.select)
const getCheck = this.select
if (getCheck.length > 0) {
getCheck.forEach((i, n) => {
const node = this.$refs.tree.getNode(i)
console.log('===循环==')
if (node != null) {
if (node.isLeaf) {
this.$refs.tree.setChecked(node, true)
} else {
node.indeterminate = true
node.checked = true
}
}
})
}
},

最后

以上就是勤劳八宝粥为你收集整理的element中el-tree根据后端返回数据，构建父节点半选状态的全部内容，希望文章能够帮你解决element中el-tree根据后端返回数据，构建父节点半选状态所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。