vue3 el-tree结合el-input实现文字过滤,并且只点击根节点时处理某些逻辑

vue3 el-tree结合el-input实现文字过滤,并且只点击根节点时处理某些逻辑

效果如图:
在这里插入图片描述

只点击红色框内容触发对应函数,实现相应逻辑,点击一级二级节点不触发。

直接看代码

<template>
    <el-row style="min-height: 100vh">
        <el-col class="left" :md="8">
            <div class="left-content">
                <el-form
                    label-width="100px"
                >
                    <el-form-item
                        label="人员名称"
                        label-width="95px"
                    >
                    <div class="filter-input">
                        <el-input v-model="filterText" clearable placeholder="请输入人员名称"/>
                    </div>
                    </el-form-item>
                </el-form>
                <el-tree 
                    v-if="isShowTree"
                    ref="treeRef"
                    :data="userTreeData" 
                    default-expand-all 
                    :filter-node-method="filterNode"
                    :props="defaultProps" 
                    @node-click="clickNameNode" //点击节点触发
                />
            </div>
        </el-col>
</template>
  
<script lang="ts" >

import { getTreeList } from "xxx"
import { ElTree } from 'element-plus'

export default defineComponent({
    name: 'UserInfoManagement',,
    setup() {
        interface Tree {
            id: number
            label: string
            children?: Tree[]
        }
        const state = reactive({
            defaultProps: {
                children: 'children', // 渲染的子节点数据
                label: 'label',	// 用户树名称展示
            },
            userTreeData: [],  // 用户树数据
            isShowTree: false, // 是否渲染用户树
        })
        const filterText = ref('')
        const treeRef = ref<InstanceType<typeof ElTree>>()

        onMounted(() => {
            getTree()
        })

        onBeforeUnmount(() => {
            state.isShowTree = false
        })

		watch和filterNode实现对用户树的文字过滤

		// 监听filterText==>input绑定的值
        watch(filterText, (val) => {
            treeRef.value!.filter(val)
        })

        // 过滤节点内容
        const filterNode = (value: string, data: Tree) => {
            if (!value) return true
            return data.label.includes(value)
        }
         /**
           * @description 解析proxy数据为普通数据
           * @param value 
          */
        const analysisProxy = (value: any) => {
         return JSON.parse(JSON.stringify(value))
        }

        // 获取用户树数据
        const getTree = async () => {
            const { data } = await getTreeList()
            if (data && data.length > 0) {
                state.userTreeData = data
                state.isShowTree = true
            } 
        }

        // 点击树节点触发
        const clickNameNode = (treeNode: object) => {
            const nowNode = analysisProxy(treeNode)
            // 点击的是用户(根节点)
            // 次处我是和后端商量让后端加个type字段来区分根节点还是父节点
            if (nowNode.type === '1') {
                xxx
            }
            // 也可以这么判断
            if (!nowNode.children) {
            	//判断还有没有children属性,一般情况根节点是不应该再返回children属性的
            }
        }

        return {
            ...toRefs(state),
            filterText,
            treeRef,
            clickNameNode,
            filterNode,
        }
    },
})
</script>

<style lang="scss" scoped>
.left {
    padding: 20px;

    .left-content{
        min-height: 70vh;
        .filter-input {
            min-height: 30px;
            margin: 0px;
            min-width: 130px;
        }
    }
}
</style>
### Vue3实现 `el-tree` 组件的懒加载展开功能 在 Vue3 的项目中,可以通过配置 `<el-tree>` 组件的相关属性来实现树形结构的懒加载功能。以下是具体的实现方法: #### 1. 配置基础模板 通过设置 `lazy` 和 `load` 属性,可以启用懒加载模式并定义异步数据加载逻辑。 ```html <template> <div> <!-- 输入框用于过滤 --> <el-input placeholder="请输入搜索内容" v-model="filterText" class="inputStyle" clearable @input="handleFilter" /> <!-- 树组件 --> <el-tree :data="treeData" node-key="id" :props="defaultProps" :filter-node-method="filterNode" ref="treeRef" :expand-on-click-node="false" lazy :load="loadNode" class="tree_Style" > </el-tree> </div> </template> ``` --- #### 2. 定义响应式数据 在 `setup()` 或组合式 API 中初始化必要的状态变量。 ```javascript <script setup> import { ref, watch } from &#39;vue&#39;; const treeData = ref([]); // 初始为空数组 const filterText = ref(&#39;&#39;); // 过滤输入框的内容 const defaultProps = { label: &#39;name&#39;, // 节点显示字段名 children: &#39;children&#39;, isLeaf: &#39;leaf&#39; // 是否为叶子节点 }; const treeRef = ref(null); // 处理过滤操作 function handleFilter(value) { treeRef.value.filter(value); } // 自定义过滤函数 function filterNode(value, data) { if (!value) return true; return data.name.includes(value); } </script> ``` --- #### 3. 实现懒加载逻辑 (`load`) `load` 方法会在每次节点被展开触发,需返回一个 Promise 并调用后端接口获取子节点数据。 ```javascript async function loadNode(node, resolve) { try { const params = { id: node.level === 0 ? &#39;&#39; : node.data.id, keyword: filterText.value || &#39;&#39; }; const response = await fetchLazyTreeData(params); // 假设这是封装好的请求方法 if (response.success && Array.isArray(response.data)) { resolve(response.data.map(item => ({ ...item, leaf: !item.children?.length // 动态判断是否为叶子节点 }))); } } catch (error) { console.error(error); resolve([]); } } // 模拟后端接口请求 async function fetchLazyTreeData({ id, keyword }) { const url = `/api/tree-data?id=${id}&keyword=${encodeURIComponent(keyword)}`; const res = await fetch(url).then(r => r.json()); return res; } ``` --- #### 4. 整合样式与交互 为了提升用户体验,可以在 CSS 文件中自定义树组件的样式。 ```css <style scoped> .inputStyle { margin-bottom: 10px; width: 100%; } .tree_Style ::v-deep(.el-tree-node__content) { height: 36px; line-height: 36px; } </style> ``` --- ### 总结 以上代码展示了如何基于 Vue3Element Plus 实现 `el-tree` 的懒加载功能。核心在于: - 使用 `lazy` 和 `load` 属性动态加载子节点。 - 结合 `filter-node-method` 提供实过滤支持[^1]。 - 后端接口负责提供分层数据,并根据关键词筛选结果。 --- ####
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jieyucx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值