|
@@ -1,6 +1,6 @@
|
|
<template>
|
|
<template>
|
|
<ElTree class="hc-tree-node tree-line" ref="ElTreeRef" :props="ElTreeProps" :data="datas" highlight-current accordion node-key="primaryKeyId"
|
|
<ElTree class="hc-tree-node tree-line" ref="ElTreeRef" :props="ElTreeProps" :data="datas" highlight-current accordion node-key="primaryKeyId"
|
|
- :default-expanded-keys="TreeExpandKey" @node-click="ElTreeClick" @node-contextmenu="ElTreeLabelContextMenu" :indent="0">
|
|
|
|
|
|
+ :default-expanded-keys="TreeExpandKey" @node-click="ElTreeClick" @node-contextmenu="ElTreeLabelContextMenu" :indent="0" :filter-node-method="filterNode">
|
|
<template #default="{ node, data }">
|
|
<template #default="{ node, data }">
|
|
<div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
|
|
<div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
|
|
<!--树组件,节点名称-->
|
|
<!--树组件,节点名称-->
|
|
@@ -33,7 +33,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import {ref,watch} from "vue";
|
|
|
|
|
|
+import {ref,watch,nextTick} from "vue";
|
|
import {getArrValue,getObjValue} from "vue-utils-plus"
|
|
import {getArrValue,getObjValue} from "vue-utils-plus"
|
|
//参数
|
|
//参数
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
@@ -73,6 +73,10 @@ const props = defineProps({
|
|
type: Boolean,
|
|
type: Boolean,
|
|
default: false
|
|
default: false
|
|
},
|
|
},
|
|
|
|
+ searchTreeVal:{
|
|
|
|
+ type: String,
|
|
|
|
+ default: '11'
|
|
|
|
+ }
|
|
})
|
|
})
|
|
|
|
|
|
//变量
|
|
//变量
|
|
@@ -90,6 +94,7 @@ const isAutoKeys = ref(props.isAutoKeys)
|
|
const TreeExpandKey = ref(props.autoExpandKeys)
|
|
const TreeExpandKey = ref(props.autoExpandKeys)
|
|
const idPrefix = ref(props.idPrefix);
|
|
const idPrefix = ref(props.idPrefix);
|
|
const isSubmitCounts = ref(props.submitCounts);
|
|
const isSubmitCounts = ref(props.submitCounts);
|
|
|
|
+const searchInfo=ref(props.searchTreeVal)
|
|
|
|
|
|
//监听
|
|
//监听
|
|
watch(() => [
|
|
watch(() => [
|
|
@@ -99,17 +104,33 @@ watch(() => [
|
|
props.autoExpandKeys,
|
|
props.autoExpandKeys,
|
|
props.idPrefix,
|
|
props.idPrefix,
|
|
props.submitCounts,
|
|
props.submitCounts,
|
|
-], ([menus, isMark, AutoKeys, expandKeys, UserIdPrefix, submitCounts]) => {
|
|
|
|
|
|
+ props.searchTreeVal
|
|
|
|
+], ([menus, isMark, AutoKeys, expandKeys, UserIdPrefix, submitCounts,searchTreeVal]) => {
|
|
menusData.value = menus
|
|
menusData.value = menus
|
|
menuMark.value = isMark
|
|
menuMark.value = isMark
|
|
isAutoKeys.value = AutoKeys
|
|
isAutoKeys.value = AutoKeys
|
|
TreeExpandKey.value = expandKeys
|
|
TreeExpandKey.value = expandKeys
|
|
idPrefix.value = UserIdPrefix
|
|
idPrefix.value = UserIdPrefix
|
|
isSubmitCounts.value = submitCounts
|
|
isSubmitCounts.value = submitCounts
|
|
|
|
+ searchInfo.value=searchTreeVal
|
|
})
|
|
})
|
|
|
|
+watch(searchInfo, (val) => {
|
|
|
|
+ if(val){
|
|
|
|
+ nextTick(()=> {
|
|
|
|
+ ElTreeRef?.value.filter(val)
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ }else{
|
|
|
|
+ emit('changeSearch')
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+},
|
|
|
|
|
|
|
|
+{immediate:true}
|
|
|
|
+
|
|
|
|
+)
|
|
//事件
|
|
//事件
|
|
-const emit = defineEmits(['menuTap','nodeTap'])
|
|
|
|
|
|
+const emit = defineEmits(['menuTap','nodeTap','changeSearch'])
|
|
|
|
|
|
//节点被点击
|
|
//节点被点击
|
|
const ElTreeClick = async (data,node) => {
|
|
const ElTreeClick = async (data,node) => {
|
|
@@ -178,11 +199,31 @@ const removeElTreeNode = (key) => {
|
|
//删除 Tree 中的一个节点,使用此方法必须设置 node-key 属性
|
|
//删除 Tree 中的一个节点,使用此方法必须设置 node-key 属性
|
|
ElTreeRef.value.remove(node)
|
|
ElTreeRef.value.remove(node)
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ const getReturnNode=(node,_array,value)=>{
|
|
|
|
+ let isPass = node.data && node.data.title && node.data.title.indexOf(value) !== -1;
|
|
|
|
+ isPass?_array.push(isPass):'';
|
|
|
|
+ if(!isPass && node.level!=1 && node.parent){
|
|
|
|
+ getReturnNode(node.parent,_array,value);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+const filterNode = (value, data,node) => {
|
|
|
|
+ if(!value){
|
|
|
|
+ return true;
|
|
|
|
+ }
|
|
|
|
+ let level = node.title;
|
|
|
|
+ let _array = [];//这里使用数组存储 只是为了存储值。
|
|
|
|
+ getReturnNode(node,_array,value);
|
|
|
|
+ let result = false;
|
|
|
|
+ _array.forEach((item)=>{
|
|
|
|
+ result = result || item;
|
|
|
|
+ });
|
|
|
|
+ return result;
|
|
|
|
+ }
|
|
// 暴露出去
|
|
// 暴露出去
|
|
defineExpose({
|
|
defineExpose({
|
|
setElTreeMenuMark,
|
|
setElTreeMenuMark,
|
|
- removeElTreeNode
|
|
|
|
|
|
+ removeElTreeNode,
|
|
|
|
+ filterNode
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|
|
|
|
|