饿了么Tree组件父子级联关系改造

u010319119

已于 2022-11-17 17:38:16 修改

阅读量1.1k

点赞数 17

文章标签： vue.js javascript 前端

于 2022-11-17 17:32:57 首次发布

本文链接：https://blog.csdn.net/u010319119/article/details/127907871

版权

VUE-Element-UI

#记录一下饿了么Tree组件父子组件的关联处理

需求：
1、角色-菜单按钮的关联关系，菜单和按钮之间并不是强关联关系，表现在角色有当前菜单，可以没有这个菜单下面的按钮，也就是父节点是选中状态，子节点是全部非选中状态，Tree组件的check-strictly属性（在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false）则无法满足这种场景需求，于是对该组件进行一定程度的适配改造。

目标：
1.父节点取消选中，子节点全部取消
2.子节点全部取消，不影响父节点选中
3.子节点选中时，其链路上的父节点全部选中

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
   <el-tree
	  :data="data"
	  show-checkbox
	  check-on-click-node
	  node-key="id"
	  ref="tree"
	  :check-strictly=true
	  @check="nodeCheck"
	  @check-change="nodeChange"
	  :default-expanded-keys="[2, 3]"
	  :default-checked-keys="[5]"
	  :props="defaultProps">
	</el-tree>
	
  </div>
  <style>
  
  </style>
</body>

  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
      },
	  methods:{
		nodeCheck(data, nodeAttr){    
			//debugger
			//var node = this.$refs.tree.getNode(data.id);
			
			//this.childNodesChange(node);
			//this.parentNodesChange(node);
		},
		nodeChange(data, nodeChecked, childNodeChecked){    
			//debugger
			var node = this.$refs.tree.getNode(data.id);
			
			
			if (nodeChecked) {
				// 节点被选中，选中父节点
				
				this.parentNodesChange(node);
			
			} else {
				// 取消子节点
				this.childNodesChange(node);
			}
		},
		childNodesChange(node){
			let len = node.childNodes.length;
			for(let i = 0; i < len; i++){
			  node.childNodes[i].checked = false;
			  this.childNodesChange(node.childNodes[i]);
			}   
		},
		parentNodesChange(node){
			if(node.parent){
			  for(let key in node){
				if(key == "parent"){
				  node[key].checked = true;
				  this.parentNodesChange(node[key]);
				}
			  }
			}      
		}
		
	  }
    })
  </script>
  
</html>