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

最新推荐文章于 2025-05-30 09:06:24 发布

star-1331

最新推荐文章于 2025-05-30 09:06:24 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue el-tree 动态更新数据

本文链接：https://blog.youkuaiyun.com/weixin_40970987/article/details/99574920

vue 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一个基于Vue的表格组件实现，该组件允许用户在表格中进行树形数据的选择。通过使用el-table、el-tree等Element UI组件，实现了动态添加机构的功能，并详细解析了如何通过双向数据绑定和事件监听来更新选中的树节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：
在这里插入图片描述
代码解析：

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