2020-09-15

最近做后台管理系统做权限管理，用的是tree树形结构，当然文档提供了关联关系 但是不是我想要的
需求是这样的：
当选中父节点时下面所有子节点选中；当选中子节点时，它的父节点选中；
当取消子节点选中时，它的父级不变

下面展示一些 内联代码片。

// template
<el-tree
      ref="tree"
      default-expand-all
      :data="optionData"
      show-checkbox
      check-strictly
      node-key="id"
      @check="getCurrentNode"
      :default-checked-keys="ruleForm.menuIds"
      :props="defaultProps">
</el-tree>
// js

        data(){

            return{

                modal_menu:false,

                roleIds:'',

                systemType:'lcc',

                roleTypes:'',

                defaultProps: {

                    children: 'children',

                    label: 'title'

                },

                ruleForm: []

            }

        },

        computed:{

            tree_menu_permission(){

                let data = this.$store.state.role.tree_menu_permission;

                if(data.length) {

                    this.checkedShow(data);

                }

                return this.$store.state.role.tree_menu_permission;

            }

        },

methods：{
    getCurrentNode(data) {
       // console.log(data)
        let node = this.$refs.tree.getNode(data);
        this.childNodes(node);
        this.parentNodes(node);
     },
     //具体方法可以看element官网api
     childNodes(node){
         let len = node.childNodes.length;
          for(let i = 0; i < len; i++){
              node.childNodes[i].checked = node.checked;
              this.childNodes(node.childNodes[i]);
          }
      },
      parentNodes(node){
          if(node.parent){
              for(let key in node){
                  if(key == "parent"){
                      node[key].checked = true;
                      this.parentNodes(node[key]);
                  }
              }
          }
      },
}
//希望对童鞋们有所帮助