el-tree拖拽，过滤查询

<el-input placeholder="请输入后回车查询" @change="searchAction" v-model="searchText"></el-input>
<el-tree
	:data="tabList"
	node-key="templateTitleId"
	@node-click="nodeClick"
	:props="defaultProps"
	default-expand-all
	:filter-node-method="filterAction"
	:highlight-current="true"
	draggable
	@node-drop="handleDrop"
	:allow-drop="allowDrop"
>

import { defineAsyncComponent,defineComponent, nextTick,Ref,ref ,onMounted, reactive, toRefs,ComputedRef ,computed} from 'vue'
export default defineComponent({
  props: {},
  setup (props) {
    const contentTreeRef: Ref = ref(null);
    const state = reactive<any>({
      tabList:[],
      timer: null,
	  searchText: '',
	  defaultProps: {
		label: 'templateTitle',   
		value: 'templateTitleId',
		children: 'children',
	 },
});

过滤：

const keyPropsData: ComputedRef = computed(() => {
	return state.defaultProps;
});

function filterAction(value: string, data: any) {
	if (!value) return true;
	return data[keyPropsData.value.label] && data[keyPropsData.value.label].indexOf(value) !== -1;
}

let searchTimer: number | null = null;
function searchAction() {
	if (searchTimer) {
		window.clearTimeout(searchTimer);
		searchTimer = null;
	}
	searchTimer = window.setTimeout(() => {
		let arr = '';
		if (state.searchText.includes(',')) {
			arr = state.searchText.split(',');
		} else {
			arr = state.searchText;
		}
		(contentTreeRef as any).value.filter(arr);
	}, 100);
}

拖拽：

// 允许拖拽的节点
function allowDrop(draggingNode:any,dropNode:any,type:any) {
//draggingNode(拖拽的节点)
//dropNode(放置的目标节点)
//type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示
//放置在目标节点前、插入至目标节点和放置在目标节点后
//以下有几种情况的拖拽：
	//1.只有父节点可以拖拽
	  if (draggingNode.level != '1') {
        return false
      } 
    //2.只有同级可以拖拽
     if(draggingNode.level == dropNode.level){
       return type == "prev" || type == "next"
     }else if(draggingNode.level == dropNode.level+1){
       return type == 'inner'
     }else{
       return false
     }
}

// el-tree拖拽
function handleDrop(draggingNode:any,dropNode:any,dropType:string) {
	let paramsData = [] as any;
	//当拖拽类型不为inner,说明只是在现有的节点间移动,当放置的位置不是目标位置中时直接取data,反之取父节点data
	let data = dropType != "inner" ? dropNode.parent.data:dropNode.data;
	//要循环的节点
	var nodeData = dropNode.level == 1 && dropType != "inner" ?data:data.children;
	//根据后端需要的参数传参
	nodeData.forEach((element:any, i: number)=>{
		let dept = {
			templateTitle:element.templateTitle,
			templateTitleId:element.templateTitleId,
			nodeRank:i,
		}
		paramsData.push(dept)
	})
	//排序API
	api(paramsData)
}