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

系统管理员 2021-10-23 13:18 786阅读 0赞

**效果展示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]  
**代码解析：**

<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">
                  
                  <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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]: /images/20211023/192710e2b5564f7da3c7ecd58696e4ee.png