<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)
}