elementUI tree组件权限分配获取当前选择所有数据（含半选中的父节点）数组

elementUI tree组件权限分类获取当前选择所有数据，并且必须把父级ID一起传过去。

效果图

2222.png

20181129172141512.png

<div style="width: 70%;margin: 0 auto;margin-top: 0px;">

<el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" icon-class='' :check-on-click-node='false'

:expand-on-click-node="false" :default-checked-keys="xz_id" :props="defaultProps" @check-change="handleCheckChange">

</el-tree>

</div>

//对应的方法，文档都有标注。不知道可以去看一下

回显效果图

微信图片_20190719161857.png

defaultProps: {
     children: 'children',    //字段里的children
      label: 'title'    //这里我是按照title循环
 },

this.$refs.tree.getCheckedKeys()    //获取当前选择的id，不带父级
this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())    //和当前的选中的和半选中的合并

 let self = this;
        this.$axios.post(this.$url + "/shop/abcdefg").then((res) => {
          self.data = res.data.list
          let arr = []        //arr是循环一级和二级的id
          res.data.list.forEach((val)=>{
             arr.push(val.id)
            val.children.forEach((res)=>{
              if(res.children.length!=0){
                  arr.push(res.id)
              }
            })
          })
         //这里我是这样回显的。拿着刚刚选中的所有数据，和arr里的ID匹配，匹配到的就是父级id，匹配不到的就是子级的，然后赋值给xz_id  ok啦哈哈哈
          this.xz_id = JSON.parse(JSON.parse(localStorage.getItem('tree'))).filter(item=>arr.indexOf(item)==-1)
  })

样式也贴出来，省的大家写了

.el-tree-node__content {
    width: 140px !important;
    float: left !important;
    margin-left: 5px !important;
  }

  .el-tree>div {
    margin: 30px 0 !important;
    background: #fff !important;
  }

  .el-tree-node.is-current>.el-tree-node__content:hover {
    background: #fff !important;
  }

  .el-tree-node__content:hover {
    /* background: #fff !important; */
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .el-tree-node__expand-icon.expanded {
    display: none;
  }


  .el-tree>div {
    margin: 10px 0 !important;
    background: #fff !important;
  }

  .el-tree-node.is-current>.el-tree-node__content:hover {
    background: #fff !important;
  }

  .el-tree-node__content:hover {
    /* background: #fff !important; */
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .el-tree-node__expand-icon.expanded {
    display: none;
  }

  .el-tree-node__content {
    width: 140px !important;
    float: left !important;
    margin-left: 5px !important;
  }

  .el-tree>div {
    padding: 5px 0 !important;
    height: auto;
    overflow: hidden;
    background: #fff !important;
    border-bottom: #F0F0F0 dotted 1px;
  }

  /* .el-tree-node.is-current>.el-tree-node__content:hover {
    background: #fff !important;
  } */

  .el-tree-node__content:hover {
    /* background: #fff !important; */
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .el-tree-node__expand-icon.expanded {
    display: none;
  }

  .el-tree-node__children {
    border-left: #ccc dotted 1px;
  }

  .el-tree-node:hover {
    background: #F5F7FA !important;
  }

把在工作中遇到的问题记录下来，百度一大堆非得让改源码，改你妹哈哈，折腾了好一阵，一起加油ヾ(◍°∇°◍)ﾉﾞ

饿