elementUI tree組件權(quán)限分類獲取當前選擇所有數(shù)據(jù)谴轮，并且必須把父級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循環(huán)
 },

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是循環(huán)一級和二級的id
          res.data.list.forEach((val)=>{
             arr.push(val.id)
            val.children.forEach((res)=>{
              if(res.children.length!=0){
                  arr.push(res.id)
              }
            })
          })
         //這里我是這樣回顯的缘琅。拿著剛剛選中的所有數(shù)據(jù)粘都，和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;
  }

把在工作中遇到的問題記錄下來呻纹，百度一大堆非得讓改源碼堆生，改你妹哈哈专缠，折騰了好一陣，一起加油ヾ(?°?°?)??

餓