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>
相关推荐
KaMeidebaby2 分钟前
卡梅德生物技术快报|禽类成纤维细胞 FISH 实验:鸟类性别染色体基因定位技术实现与数据验证
前端·数据库·其他·百度·新浪微博
天若有情67315 分钟前
前端高阶性能优化:跳出传统懒加载与预加载,基于用户行为做轻量预判加载
前端·性能优化
小小小小宇18 分钟前
前端转后端:SQL 是什么
前端
张元清1 小时前
React Observer Hooks:7 种监听 DOM 而不写样板代码的方式
前端·javascript·面试
广州华水科技1 小时前
单北斗GNSS变形监测是什么?主要有怎样的应用与优势?
前端
卷帘依旧1 小时前
【未完待续】React高频面试题
前端
m0_738120721 小时前
ctfshow靶场SSRF部分——基础绕过到协议攻击解题思路与技巧(一)
服务器·前端·网络·安全·php
counterxing1 小时前
AI Agent 做长任务,问题到底 出在哪?
前端·后端·ai编程
漂流瓶jz2 小时前
从TailwindCSS到UnoCSS:原子化CSS框架接入、特性与配置
前端·css·react.js
Mr_Swilder2 小时前
01:按步解析 —— 绘制固定三角形
前端