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>

el-tree树形结构动态更新数据相关推荐

使用ztree.js，受益一生，十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
python画父子关系图_将有父子关系的一维数组转换成树形结构(多维)数据
先来个函数注释 : /** * 将有父子关系的一维数组转换成树形结构(多维)数据 * console.log(JSON.stringify(setTreeData(data), null, 2)); ...
JavaScript中的扁平化数据转换为树形结构、树形结构扁平化数据
1. 扁平化数据 ---- > 树形结构 1.1 第一种数据类型原始数据只有id和pId相互关联 let data = [{ id: 639, name: "商品管理", ...
mysql 父子维,将有父子关系的一维数组转换成树形结构(多维)数据
拉莫斯之舞先来个函数注释 :/** * 将有父子关系的一维数组转换成树形结构(多维)数据 * console.log(JSON.stringify(setTreeData(data), null, ...
android 多数据图表,Android统计图表MPAndroidChart：为多条统计折线动态更新数据，以高温低温曲线为例【7】...
Android统计图表MPAndroidChart:为多条统计折线动态更新数据,以高温低温曲线为例[7] 本文在附录文章6的基础上,为Android统计图表MPAndroidChart的同一个L ...
WPF使用Live Chart之动态更新数据
WPF使用Live Chart之动态更新数据效果如下: 前台代码: <Window x:Class="Chapter3.MainWindow"xmlns="htt ...
jquery chosen插件动态更新数据
动态更新数据 $("#txt_search_batch").find("option").remove(); $("#txt_search_batch ...
echarts简单使用、echarts通过计时器进行动态更新数据、echarts连接数据库实时更新数据
1.echarts引入在官网下载并放入项目中. 引入echarts.js文件: <script src="./echarts.js"></script> ...
把数据转换为在内存中Tree(树形结构)。_备战秋招：一文搞定数据库常见面试题...
点击上方"蓝字",关注了解更多 1.数据库范式第一范式:列不可分,eg:[联系人](姓名,性别,电话),一个联系人有家庭电话和公司电话,那么这种表结构设计就没有达到 1NF: 第 ...

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

el-tree树形结构动态更新数据相关推荐

最新文章

热门文章