我所做的需求是点击按钮的时候展示一个el-drawer,抽屉中显示一个树形控件,第一次请求回来的数据是菜单,菜单是无法选中的,只有点击菜单获取到的数据才可以进行选择。
html代码
<el-tree ref="treeForm" style="margin-top:15px;padding: 0 20px;" :data="data" :props="props" show-checkbox
node-key="id" :check-strictly="true" @check="handleCheckChange" :default-expanded-keys="data"
:default-checked-keys="treeCheckList" @node-click="treeNodeClick" :expand-on-click-node="false"
class="stafftree" :default-expand-all="true">
</el-tree>
data定义的内容
data: [{
id: null,
label: '场景分类',
children: []
}],
因为我的需求是第一级是写死的数据,所以拿到请求后端的数据push到data的children中
methods中的方法
// 查找场景所有数据
// 获取菜单的数据,将每个菜单都添加属性isChange,isChange为false时该复选框禁用
getTreeList() {
listSysSceneClasses(this.queryTreeParams).then(res => {
console.log('-------res', res)
if (res.code === 200) {
res.rows.forEach(item => {
item.label = item.sceneName
item.isChange = false
if (item.children) {
item.children.forEach(val => {
val.label = val.sceneName;
val.isChange = false
})
}
})
this.data[0].children = res.rows
console.log('---------res.rows', res.rows)
console.log('---------this.data', this.data)
this.setDisabled(this.data)
}
})
},
// 向有children的节点上增加disabled属性
setDisabled(treeData) {
if (treeData) {
treeData.forEach(item => {
if (!item.isChange) {
item.disabled = true
this.setDisabled(item.children)
}
})
}
},
获取菜单下的数据可以使用懒加载,我没有使用,需要的话可以去换一下
// 点击el-tree获取此菜单中的数据
treeNodeClick(node) {
if (this.nodeIdPushList.indexOf(node.id) !== -1) {
return
}
// 将点击获取到的id push到nodeIdPushList中,再此点击时判断是否已经push过,push过直接return
this.nodeIdPushList.push(node.id)
this.queryParamsTree.sceneClassesId = node.id
listScene(this.queryParamsTree).then(res => {
console.log('-----------res', res)
if (res.code === 200) {
let arr = []
res.rows.forEach(item => {
item.label = item.sceneName
item.isChange = true
arr.push(item.id)
})
this.data[0].children.forEach(dataItem => {
if (dataItem.id === node.id) {
dataItem.children.push(...res.rows)
}
})
this.setDisabled(this.data)
}
})
},
将禁用的复选框隐藏掉
<style lang="scss" scoped>
/* 隐藏掉el-tree中有disabled属性的框框 */
/* .stafftree为el-tree的类名 */
::v-deep .stafftree {
// 不可全选样式
.el-tree-node {
.el-checkbox__input.is-disabled {
display: none;
}
}
}
</style>
最后的效果