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" ></i></span></el-col>
</el-row>
<el-table :data="orglists" class="list" >
<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(s cope.$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,
id: 2,
label: '⼀级 2',
children: [{
id: 5,
label: '⼆级 2-1'htmlborder
}, {
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 () {
//模拟初始化数据
},
methods:{
getInfo(){
var info = ['⼆级 2-1','⼆级 3-2']
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([])
},
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。