element下拉树

本文档介绍了如何在项目中实现一个具有下拉显示树形结构的组件,重点讲解了remoteMethod、clearHandle等核心方法,以及处理父子级联和回显问题的策略,如changeDefaultCheck和checkNode等。通过设置:check-strictly="true"来取消父子级间的关联,并提供了获取已选节点的方法。最后给出了未经优化的完整组件代码。
摘要由CSDN通过智能技术生成

在项目中我们可能会遇到需要下拉然后出现一颗树的需求,类似下图
在这里插入图片描述
那么我们就着手来实现这个功能吧!

首先我们先来实现最基本的下拉树

<template>
	<el-select 
		class="ld-select"
		clearable
		:value="valueTitle"
		filterable
		:filter-method="remoteMethod"
		@clear="clearHandle"
		placeholder="请输入"
		popper-class="ld-select_tree-drop"
		@focus="changeDefaultCheck"
	>
		<el-option :value="valueTitle">
			<el-tree 
				show-checkbox
				accordion
				node-key="id"
				:check-strictly="true"
				ref="selectTree"
				:data="options"
				:props="defaultProps"
				:node-key="defaultProps.value"
				@check="checkNode"
				:default-checked-keys="defaultCheckNodes"
				:filter-node-method="filterNode">
			</el-tree>
		</el-option>
		<div class="ld-select_tree" disabled>
			<el-button type="primary" @click="allotMenuConfirm" size="mini">确 定</el-button>
		</div>
	</el-select>
</template>

el-select的:valu="valueTitle",valueTitle我只是定义了一下,我这边并不需要展示他勾选了什么,因为树选用了showBox及一个确认按钮来确认最终选择。ps:如果不写value会报错

接下来是各个方法

remoteMethod

remoteMethod(val){
   
	this.valueTitle = val
	this.$refs.selectTree.filter(val) // 过滤搜索树中节点
}

clearHandle

clearHandle(){
   
	this.valueTitle = ''
	this.remoteMethod(this.valueTitle)
}

因为组件会涉及到反显的问题,所以使用:check-strictly="true"来取消掉了父子级间的关联,然后写了一些方法来实现点击勾选的效果

changeDefaultCheck 此方法写在select的focus事件触发时,主要是用来解决,回显时候,父被勾选子未全被勾选时,父依旧为全选状态的问题

changeDefaultCheck(){
    // 改变默认选中的时候 子级未全选父级全选状态的问题(改为半选)
	const defaultNodes = this.$refs.selectTree.getCheckedNodes()
	defaultNodes.map((item)=>{
   
		if(item.childList && item.childList.length > 0){
   
			const currentNodes = this.$refs.selectTree.getNode(item)
			this.changeParentStatus(currentNodes)		
		}
	})	
}

checkNode树的checkNode方法

checkNode(node, treeStatus){
   
	const selected = treeStatus.checkedKeys.indexOf(node.id) // -1未选中
	// 选中
	if(selected === -1) {
   
		this.changeParentAndChild(node) // 取消节点时的方法					
	} else {
   
		// 勾子改变父
		this.selectedParent(node)
		// 勾父全选子
		this.uniteChildSame(node, true)
	}
}

changeParentAndChild取消节点的方法

changeParentAndChild(currentObj){
   
	const currentNode = this.$refs.selectTree.getNode(currentObj)
	if(currentNode.childNodes.length > 0){
    // 被取消的如果有子  则走uniteChildSame方法去取消所有的子的选中状态
		this.uniteChildSame(currentObj, false)
	}
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值