for_client/src/views/tentative/detect/components/DivisionTree1.vue

<template>
  
    <ElTree 
    class="hc-tree-node tree-line" 
    ref="ElTreeRef" 
    :props="ElTreeProps" 
    :data="datas" 
    highlight-current 
    accordion node-key="primaryKeyId" 
    :indent="0" 
    @node-click="ElTreeClick"
     show-checkbox
    @check-change="handleCheckChange"
     :default-checked-keys="defaultCheckarr"
     :default-expand-all="defaultExpandAll"
     v-loading="divisionLoading"
   
    >
        <template #default="{ node, data }">
            <div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
                <div class="label" :class="node.level === 1?'level-name':''">{{ node.label }}</div>
            </div>
        </template>
    </ElTree>
</template>

<script setup>
import { ref , watch,nextTick} from "vue";
//参数
const props = defineProps({
    datas: {
        type: Array,
        default: () => ([])
    },
    idPrefix: {
        type: String,
        default: 'division-tree-data2-'
    },
    defaultCheckarr:{
        type: Array,
        default: () => ([])
    },
    ElTreeProps:{
        type:Object,
        default:{
        label:'fullName',
        children: 'children'      
        }
    },
    defaultExpandAll:{
        type:Boolean,
        default:false
    },
    divisionLoading:{
        type:Boolean,
        default:false
    },
    linksRelateSearchTreeVal:{
        type: String,
        default: ''
    }
})
const linksRelateSearchTreeValInfo=ref('')
//监听
watch(() => [
    props.divisionLoading,
    props.linksRelateSearchTreeVal,
   
], ([divisionLoading,LinksRelateSearchTreeVal]) => {
   isdivisionLoading.value=divisionLoading
   linksRelateSearchTreeValInfo.value=LinksRelateSearchTreeVal
})
watch(linksRelateSearchTreeValInfo, (val) => {
    if(val){
        nextTick(()=> {
          ElTreeRef?.value.filter(val)
        }) 
    }else if(!val.length){
        
    }
   
},

{immediate:true}

)
//变量
const ElTreeRef = ref(null)
const isdivisionLoading=ref(props.divisionLoading)
const ElTreeProps = ref({
    label: 'fullName',
    children: 'children'
})
// const defaultCheckarr =  ref([])

//事件
const emit = defineEmits(['nodeTap','nodeCheck'])

//节点被点击
const ElTreeClick = async (data,node) => {
    emit('nodeTap', {node, data})
}
//节点被选中
const handleCheckChange = (data,checked,indeterminate,) => {
  emit('nodeCheck',ElTreeRef.value?.getCheckedNodes(false, false))
}
 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;
    }
</script>

<style lang="scss" scoped>
@import "../../../../styles/app/tree.scss";
</style>