element-ui checkbox树，选中后再二次生成新树

最新推荐文章于 2024-08-13 00:11:49 发布

原创最新推荐文章于 2024-08-13 00:11:49 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox element-ui tree

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

ElementUI

15 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现的树形结构代码，包括树形结构的展示、节点点击事件处理、多选与搜索功能，以及如何在两个模态框间传递和更新树形数据。通过具体代码示例，详细解析了树形数据的处理方法，如子节点到父节点的数据获取、生成新树等。

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

树形结构代码：

<div class="modal-body" style="height:350px">
	<div class="fileTree">
		<el-tree v-cloak show-checkbox default-expand-all 
			node-key="id" 
			ref="tree" 
			@node-click="handleNodeClick" 
			:data="data" 
			:props="defaultProps" 
			check-strictly
			:expand-on-click-node="false"
			:filter-node-method="filterNode"
			class="filter-tree"
		>
			<span class="custom-tree-node" slot-scope="{ node, data }"> 
			<span> {{ node.label }}</span>
			<span>
				<el-button
					type="text"
					size="mini"
					@click="() => editMenu(data)">
					编辑菜单
			    </el-button>
			</span>
		</el-tree>
	</div>
</div>

事件执行入口：

<div class="modal-footer">
	<button  type="submit" class="btn btn-primary btn-sm btn-confirm" @click="getCheckedData">
		设为配置文件
	</button>
	<button type="button" class="btn btn-default btn-sm btn-cancel" data-dismiss="modal">
		 取消
	</button>
	<button  id="newTree" type="button" class="btn btn-primary btn-sm btn-confirm" @click="toNewTree()">
		 生成新树
	</button>
</div>

二次生成新树模态框代码：

<div class="modal fade" id="newdplyPackageFileTree" role="dialog" aria-labelledby="myModalLabel" style="z-index: 1056;">
        <div class="modal-dialog" role="document" id="newFileTree">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title" id="newmyModalLabelForTask">发布包文件结构2</h5>
                </div>
				<!-- <ul id="fileTree" class="ztree" style="height: 360px;overflow-y: auto;">
				</ul> -->
				<div class="input-group" style="border-radius:0px;border-bottom:1px solid #ddd;box-shadow:none;">
					<input type="text" style="border-radius:0px;border:none;box-shadow:none;" v-model="filterText" class="form-control" placeholder="请输入" aria-describedby="basic-addon2">
					<span style="padding:0px 20px;border-radius:0px;background-color:#fff;box-shadow:none;border:none;" class="input-group-addon" id="basic-addon2"><img style='height:30px;' src="${ctx}/images/search_total.png"></span>
				</div>
				<div class="modal-body" style="height:350px">
					<div class="fileTree">
						<el-tree v-cloak default-expand-all 
							node-key="id" 
							ref="tree" 
							@node-click="handleNodeClick" 
							:data="dataNew" 
							:props="defaultProps" 
							
							:expand-on-click-node="false"
							:filter-node-method="filterNode"
							class="filter-tree"
						>
							<span class="custom-tree-node" slot-scope="{ node, data }"> 
							<span> {{ node.label }}</span>
						</el-tree>						
					</div>
				</div>
				<div class="modal-footer">
			        <button type="button" class="btn btn-default btn-sm btn-cancel" data-dismiss="modal">
			        	取消
			        </button>
                </div>
			</div>
        </div>
    </div>

Vue代码：

<script>
	var vm = new Vue({
		el:'#fileTree',
		data: {
	         data: [{
	             name: '加载中......',
	         }],
	         checkedId: [],
	         checkedObj:[],		//所有选中节点的  对象数组
	         defaultProps: {			//el-tree默认数据格式
	             children: 'children',
	             label: 'name',  
	         },
	         currentClick:[],
	         filterText: '',			//声明搜索框中初始值为空
	         newTreeArr:null
	     },
	     watch: {					//搜索框内容监控（固定方法）
	  	    filterText(val) {
	  	      this.$refs.tree.filter(val);
	  	    }
	  	},
	    updated() {
	        // 给多选树设置默认值
	        this.$refs.tree.setCheckedKeys(this.checkedId);
	    },
		methods:{
			dataTranse:function(val){
				var that = this;
				var sth = val;
				console.log('sth>>>>>');
				console.log(sth);
				var res = dataTrans(sth, function (from, to) {
                    to.name = from.NAME;
                    to.id=from.ID;
                    to.label=from.NAME;
					to.disabled = from.DISABLED;
                });
				that.data = res;
			},
			//单选树节点获取当前数据的函数
			/* clickDeal(currentObj, treeStatus){
                this.clickCheck(currentObj, treeStatus,this.$refs.tree);
            }, */
           /*  clickCheck(currentObj, treeStatus, ref) {
            	var clickObj = currentObj;
            	this.checkedObj.push(clickObj);
            	console.log('selected --- obj>>>>>');
            	console.log(clickObj);
            }, */
            //子节点-->>>父节点全部一串数据的函数
			getCheckedData() {
            	var aKey = this.getCheckedKeys(this.data, this.$refs.tree.getCheckedKeys(),'ID');
                console.log('aKey>>>>>');
            	console.log(aKey);
                //this.newTreeArr = $.extend(true, [], aKey);
                //this.newTreeArr.push()
		    },
		    //子节点-->>>父节点全部一串数据的函数
		    getCheckedKeys (data, keys, key) {
                var res = [];
                recursion(data, false);
                return res;
                // arr -> 树形总数据
                // keys -> getCheckedKeys获取到的选中key值
                // isChild -> 用来判断是否是子节点
                function recursion (arr, isChild) {
                    var aCheck = [];
                    for ( var i = 0; i < arr.length; i++ ) {
                        var obj = arr[i];
                        aCheck[i] = false;

                        if ( obj.children ) {
                            aCheck[i] = recursion(obj.children, true) ? true : aCheck[i];
                            if ( aCheck[i] ) {
                                //res.push(obj[key]);//push的key 当前为ID
                                res.push(obj);		//push选中节点的父节点对象数据
                            }
                        }

                        for ( var j = 0; j < keys.length; j++ ) {
                            if ( obj[key] == keys[j] ) {
                                aCheck[i] = true;
                                if ( res.indexOf(obj[key]) == -1 ) {
                                    //res.push(obj[key]);//push的key 当前为ID
                                    //res.push(obj);		//push选中的子节点对象数据
                                }
                                break;
                            }
                        }
                    }
                    if ( isChild ) {
                        return aCheck.indexOf(true) != -1;
                    }
                }
            },
          	//子节点&&父节点全部一串数据的函数
			getCheckedDataAll() {
            	var aKeyAll = this.getCheckedKeysAll(this.data, this.$refs.tree.getCheckedKeys(),'ID');
                console.log('aKeyAll>>>>>');
            	console.log(aKeyAll);
                this.newTreeArr = $.extend(true, [], aKeyAll);
                //this.newTreeArr.push()
		    },
		  	//子节点&&父节点全部一串数据的函数
		    getCheckedKeysAll (data, keys, key) {
                var res = [];
                recursionAll(data, false);
                return res;
                // arr -> 树形总数据
                // keys -> getCheckedKeys获取到的选中key值
                // isChild -> 用来判断是否是子节点
                function recursionAll (arr, isChild) {
                    var aCheck = [];
                    for ( var i = 0; i < arr.length; i++ ) {
                        var obj = arr[i];
                        aCheck[i] = false;

                        if ( obj.children ) {
                            aCheck[i] = recursionAll(obj.children, true) ? true : aCheck[i];
                            if ( aCheck[i] ) {
                                //res.push(obj[key]);//push的key 当前为ID
                                res.push(obj);		//push选中节点的父节点对象数据
                            }
                        }

                        for ( var j = 0; j < keys.length; j++ ) {
                            if ( obj[key] == keys[j] ) {
                                aCheck[i] = true;
                                if ( res.indexOf(obj[key]) == -1 ) {
                                    //res.push(obj[key]);//push的key 当前为ID
                                    res.push(obj);		//push选中的子节点对象数据
                                }
                                break;
                            }
                        }
                    }
                    if ( isChild ) {
                        return aCheck.indexOf(true) != -1;
                    }
                }
            },
	     	handleNodeClick(data) {
	     		console.log('clickdata>>>>>');
	     		console.log(data);
	     	},
	     	showRMenu:function(x, y, data){
	     		  $("#rMenu").css({ "display":"block","z-index":9999});
	      		  $("#rMenu a").show();
	      		  if(y>($(window).height())/2){
	      	    	//向上弹
	      	    	$("#rMenu").css({"top":y-70+"px", "left":x+5+"px", "visibility":"visible"}); //设置右键菜单的位置、可见
	      	      } else {
	      	    	//向下弹
	      	    	$("#rMenu").css({"top":y-5+"px", "left":x+25+"px", "visibility":"visible"}); //设置右键菜单的位置、可见
	      	      }
	        	  $("body").bind("mousedown", onBodyMouseDown);
	          },  
	     	editMenu(data) {
	        	this.currentClick = [];
	     		if(data){
	     			console.log('点击编辑菜单获取当前节点数据>>>>>');
	     			console.log(data);
	     			this.currentClick.push(data);
	     			this.showRMenu(event.clientX, event.clientY, data);
	     		}
	       },
	       //树搜索框
	       filterNode(value, data) {
	      	 	if (!value) return true;
	      	    return data.name.indexOf(value) !== -1;
	       },
	       toNewTree(){
	    	   this.getCheckedDataAll();
	    	   console.log('新树数据>>>>>');
			   console.log(this.newTreeArr);
			   $("#dplyPackageFileTree").modal('hide');
			   $("#newdplyPackageFileTree").modal('show');
			   vm2.dataTranseNew(this.newTreeArr);
	       }
	          
		},
		mounted: function () {
			
	    }
	    
	})
	
	
	var vm2 = new Vue({
		el:'#newFileTree',
		data: {
	         dataNew: [{
	             name: '加载中......',
	         }],
	         defaultProps: {			//el-tree默认数据格式
	             children: 'children',
	             label: 'name',  
	         },
	         filterText: '',			//声明搜索框中初始值为空
	     },
	     watch: {					//搜索框内容监控（固定方法）
	  	    filterText(val) {
	  	      this.$refs.tree.filter(val);
	  	    }
	  	},
		methods:{
			dataTranseNew:function(val){
				var that = this;
				var sth2 = val;
				console.log('sth2>>>>>');
				console.log(sth2);
				 $.each(sth2,function(i,item){
					if(item.children){
						delete item['children'];
					}
				}) 
				
				console.log('sth2---after>>>>>');
				 console.log(sth2);
				 sth2=getTree(sth2,0)
				 console.log('sth2---after---jhhhhh>>>>>');
				 console.log(sth2);
				 function getTree(data, PID) {			//二次生成树 删掉children属性，再转换ID、PID
					    let result = []
					    let temp
					    for (let i = 0; i < data.length; i++) {
					        if (data[i].PID == PID) {
					            temp = getTree(data, data[i].ID)
					            if (temp.length > 0) {
					                data[i].children = temp
					            }
					            result.push(data[i])
					        }
					    }
					    
					    return result
				}
				that.dataNew = sth2;
			},
	     	handleNodeClick(data) {
	     		console.log('clickdata2>>>>>');
	     		console.log(data);
	     	},
	       //树搜索框
	       filterNode(value, data) {
	      	 	if (!value) return true;
	      	    return data.name.indexOf(value) !== -1;
	       },   
		},
		mounted: function () {
			
	    }
	    
	})
</script>