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>
相关推荐
JayceM1 小时前
Vue中v-show与v-if的区别
前端·javascript·vue.js
HWL56791 小时前
“preinstall“: “npx only-allow pnpm“
运维·服务器·前端·javascript·vue.js
德育处主任1 小时前
p5.js 掌握圆锥体 cone
前端·数据可视化·canvas
mazhenxiao2 小时前
qiankunjs 微前端框架笔记
前端
无羡仙2 小时前
事件流与事件委托:用冒泡机制优化前端性能
前端·javascript
秃头小傻蛋2 小时前
Vue 项目中条件加载组件导致 CSS 样式丢失问题解决方案
前端·vue.js
CodeTransfer2 小时前
今天给大家搬运的是利用发布-订阅模式对代码进行解耦
前端·javascript
阿邱吖2 小时前
form.item接管受控组件
前端
韩劳模2 小时前
基于vue-pdf实现PDF多页预览
前端
鹏多多2 小时前
js中eval的用法风险与替代方案全面解析
前端·javascript