el-tree树的拖拽排序

el-tree树的拖拽排序


主要加入了draggable属性和node-drop事件,使el-tree支持拖拽,添加allow-drop判定拖拽时目标节点能否被放置

	// el-tree拖拽
		function handleDrop(draggingNode:any,dropNode:any,dropType:string,evt:any) {
			// console.log(draggingNode,'draggingNode被拖拽节点')
			// console.log(dropNode,'dropNode结束推拽最后进入的节点')
			// console.log(dropType,'dropType放置的位置')
			// console.log(evt,'evt')
			// console.log(dropNode.level,'dropNode.level')
			let paramsData = [] as any;
			let data = dropType != "inner" ? dropNode.parent.data:dropNode.data;
			// 要循环的节点
			var nodeData = dropNode.level == 1 && dropType != "inner" ?data:data.children;
			nodeData.forEach((element:{parentId: string})=>{
				element.parentId = dropNode.level == 1&& dropType != "inner" ? "0" :data.templateId;
			})
			nodeData.forEach((element:{ templateId: string, parentId: string}, i: number)=>{
				let dept = {
					templateId:element.templateId,
					parentNodeId:element.parentId,
					nodeRank:i,
					// name:element.titleName
				}
				paramsData.push(dept)
			})
			updateTemplateNodeBatchApi(paramsData).then(()=>{
				// console.log(res,'res')
			})
		}
		// 允许拖拽的节点
		function allowDrop(draggingNode:any,dropNode:any,type:any) {
		// 不允许文件中移入结点
			if(type == 'inner' && dropNode.data.nodeType != '1') {
				return false;
			}else {
				return true;
			}
		}

对于el-tree展开节点后是另一个el-tree的情况,你可以通过使用el-tree组件的自定义模板来实现。在展开节点时,你可以将子节点绑定到另一个el-tree组件的数据源中。 首先,确保你已经在项目中引入了el-tree组件。然后,在你的Vue组件中,可以这样定义el-tree组件: ```html <template> <div> <el-tree :data="treeData" :node-key="nodeKey" :props="defaultProps" @node-click="handleNodeClick"></el-tree> </div> </template> <script> export default { data() { return { treeData: [ { label: '节点1', children: [ { label: '子节点1', children: [ { label: '子节点1.1', }, { label: '子节点1.2', }, ], }, ], }, { label: '节点2', children: [ { label: '子节点2', children: [ { label: '子节点2.1', }, { label: '子节点2.2', }, ], }, ], }, ], nodeKey: 'label', defaultProps: { children: 'children', label: 'label', }, }; }, methods: { handleNodeClick(data) { // 在这里处理节点点击事件 // 获取点击的节点数据data,然后将其作为新的数据源赋值给另一个el-tree组件 this.treeData = data.children; }, }, }; </script> ``` 在上面的示例中,我们使用了el-tree组件的data属性绑定了的数据源。当点击节点时,通过handleNodeClick方法获取到该节点的子节点数据,然后将其赋值给treeData,这样就实现了展开节点后显示另一个el-tree的效果。 注意,你可以根据实际需求修改数据结构和事件处理逻辑。这只是一个简单的示例,希望能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值