el-tree树形结构动态更新数据

效果展示：

代码解析：

<template>
  <div class="newuser">
    <div class="setBox">
      <el-row class="addRole">
        <el-col :span="11">机构</el-col>
        <el-col :span="5"><span @click="AddForm"><i class="el-icon-circle-plus-outline" style="color:#409EFF"></i></span></el-col>
      </el-row>
      <el-table :data="orglists" class="list" style="width: 100%;background: #F9F9F9!important;border: 1px solid #E9E9E9;">
        <el-table-column multiple collapse-tags min-width="45%">
          <template slot-scope="scope">
              <!--通过双向数据绑定的方式，将树中选中的数据添加到option中，其中scopr.$index用于将对应的数据绑定到指定的位置，唯一识别标志-->
              <el-select v-model="mineStatus[scope.$index]" placeholder="请选择" multiple collapse-tags>
                <el-option :value="mineStatus[scope.$index]">
                  <el-tree :data="data" :props="defaultProps" :ref="ref+scope.$index" accordion @node-expand="getNodeInfo" @node-click="handleNodeClick(scope.$index)"></el-tree>
                </el-option>
              </el-select>      
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return{
        ref:'tree',//动态添加机构，对应的每一条的ref都应该唯一，否则互相影响
        mineStatus: [],
        orglists:[],
        data: [{
           id: 1,
            label: '一级 1',
            children: [{
                id: 4,
                label: '二级 1-1'
            }]
        }, {
            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'
        },
      }
    },
    created () {
      //模拟初始化数据
      this.getInfo()
    },
    
    methods:{
      getInfo(){
        var info = ['二级 2-1','二级 3-2']
        this.orglists = info;
        for(var i=0; i<info.length; i++){
          var a = []
          a.push(info[i])
          this.$set(this.mineStatus,i,a)
        }
      },
      //点击tree选择数据
      handleNodeClick(a){
        //获取当前选中的数据
        let res = this.$refs['tree'+a].getCurrentNode(true,true)
        let arrLabel = []
        arrLabel.push(res.label)
        //vue中数组传值，不能直接puth，因为内存数据还没有修改，需要通过set进行修改
        this.$set(this.mineStatus,a,arrLabel)
      },
      AddForm () {
        let cope = {
          name:'',
          value:'',
          id:'',
          label:''
        }
        /**
          this.mineStatus的数据结构为[[],[],[]]，每添加一个则push一个空的数组
        */
        this.mineStatus.push([])
        this.orglists.push(cope)
      },
      getNodeInfo(node,resolve) {
        
      }
  }
}
</script>
<style lang="scss" scoped>
  .newuser{
    height: 100%;
    .el-breadcrumb{
      padding: 20px 0 16px 0
    }
    .setBox{
      min-height: calc(100% - 70px);
      padding: 16px 16px 0 16px;
      margin-bottom: 16px;
      -webkit-box-shadow: 2px 2px 10px #888;
      border-radius: 8px;
      background: #FFF;
      .titIcon{
        font-size:0;
        margin-bottom:30px;
        em{
          display: inline-block;
          vertical-align: middle;
          width: 2px;
          height: 14px;
          margin-right:5px;
          background: #4285F4;
        }
        span{
          display: inline-block;
          vertical-align: middle;
          font-size:14px;
        }
      }
    }
    .newuser-form{
      text-align:center;
      input{
        height:30px
      }
    }
    .list{
      span{
        display:inline-block
      }
      li{
        border: 1px solid #ebeef5;
        border-top: none
      }
    }
    button{
      width: 68px;
      height: 26px;
      padding: 0;
      font-size: 12px;
    }
  }

  
  .el-breadcrumb__inner{
      color: #4285F4!important;
    }
    .is-link{
      color: #909191!important;
    }
    .el-form--inline .el-form-item{
      width:100%
    }
    .addRole{
      width:300px;
      color:#909399;
      border:1px solid #ebeef5;
      background:#f9f9f9;
      .el-col:first-child,.el-col:last-child{
        text-align:center
      }
    }
    .addForm {
      width:300px
    }
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
      height: auto;
      max-height: 274px;
      overflow: hidden;
      overflow-y: auto;
      background:#FFF
    }
    .el-select-dropdown__item.selected{
      font-weight: normal;
    }
    ul li >>>.el-tree .el-tree-node__content{
      height:auto;
      padding: 0 20px;
    }
    .el-tree-node__label{
      font-weight: normal;
    }
    .el-tree >>>.is-current .el-tree-node__label{
      color: #409EFF;
      font-weight: 700;
    }
    .el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
      color:#606266;
      font-weight: normal;
    }

</style>