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>
相关推荐
北原_春希19 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
JY-HPS19 小时前
echarts天气折线图
javascript·vue.js·echarts
尽意啊19 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜19 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts
O_oStayPositive19 小时前
Vue3使用ECharts
前端·javascript·echarts
竹秋…19 小时前
echarts自定义tooltip中的内容
前端·javascript·echarts
宝贝露.19 小时前
Axure引入Echarts图无法正常显示问题
前端·javascript·echarts
shmily麻瓜小菜鸡19 小时前
前端文字转语音
前端
人良爱编程19 小时前
Hugo的Stack主题配置记录03-背景虚化-导航栏-Apache ECharts创建地图
前端·javascript·apache·echarts·css3·html5
来颗仙人掌吃吃19 小时前
解决Echarts设置宽度为100%发现宽度变为100px的问题(Echarts图标宽度自适应问题)
前端·javascript·echarts