一:el-tree的default-expand-all属性
js
这个属性默认就是false 不给el-tree设置这个属性,el-tree就是默认折叠的
<el-tree
ref="treetwo"
:data="datatwo"
show-checkbox
node-key="menuId"
highlight-current
:props="defaultProps" />
二:初始化时父节点半选
- 需求: 初始化的时候,回显一个树形结构数据,接口返回的就勾选,没返回的就不够选 也就意味着,父节点是半选的状态传给接口,那么回显的时候,也要是半选的状态
- 如图
3. 下面的代码重点部分会标注"重点",拿走即用
js
<template>
<div>
<span
size="mini"
style="color: #409EFF;margin-right: 15px;cursor: pointer;"
@click="editmenu(row)">修改菜单</span>
<el-dialog title="修改角色菜单" :visible.sync="dialogFormVisibletwo" width="40%" center>
<el-tree
ref="tree"
:data="data"
show-checkbox
node-key="menuId"
highlight-current
:props="defaultProps"
@check-change="handleCheckChange" />
</el-dialog>
</div>
</template>
<script>
import { ElTree } from "element-ui";
import { getRoleMenu } from "../../../api/workOrder/rolemange";
export default {
name: "AaaaI",
components: {
ElTree
},
data() {
return {
// 其他数据属性
};
},
methods: {
// 编辑角色菜单
editmenu(v) {
this.editRoleMenuForm.menuIds = []
this.dialogFormVisible = true
const params = {
roleId: v.roleId
}
getRoleMenu(params).then((res) => {
this.$nextTick(() => {
res.data.forEach(item => {
// 中心端
if (this.$refs.tree.getNode(item) && this.$refs.tree.getNode(item).isLeaf) {
this.$refs.tree.setChecked(this.$refs.tree.getNode(item), true)
}
// 企业端
if (this.$refs.treetwo.getNode(item) && this.$refs.treetwo.getNode(item).isLeaf) {
this.$refs.treetwo.setChecked(this.$refs.treetwo.getNode(item), true)
}
})
})
})
}
}
}
</script>
<style>
/* 可以添加样式 */
</style>