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>
相关推荐
model200510 小时前
alibaba linux3 系统盘网站迁移数据盘
java·服务器·前端
han_11 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
前端·javascript·面试
aPurpleBerry11 小时前
React 01 目录结构、tsx 语法
前端·react.js
jayaccc11 小时前
微前端架构实战全解析
前端·架构
qingyun98912 小时前
Web Components 实战:创建自定义比例条组件
前端
前端小超超12 小时前
ionic + vue3 + capacitor遇到backButton问题
前端·javascript·vue.js
GIS之路12 小时前
GDAL 空间关系解析
前端
布列瑟农的星空12 小时前
WebAssembly入门(一)——Emscripten
前端·后端
贵州数擎科技有限公司12 小时前
一批优质 AI 域名转让(.ai)|适合 AI 创业 / 产品 / 公司品牌
前端
小二·13 小时前
微前端架构完全指南:qiankun 与 Module Federation 双方案深度对比(Vue 3 + TypeScript)
前端·架构·typescript