elementUI中el-tree 展开收起(折叠)和 父节点半选状态初始化回显并传给接口

一: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" />

二:初始化时父节点半选

  1. 需求: 初始化的时候,回显一个树形结构数据,接口返回的就勾选,没返回的就不够选 也就意味着,父节点是半选的状态传给接口,那么回显的时候,也要是半选的状态
  2. 如图

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>
相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui