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>
Vue el-tree组件是一个支持层级树结构的组件,可以用于展示组织结构、文件目录等树型结构。给每个节点后面添加输入框的需求可能是为了让用户编辑节点的名称或其他信息。实现这个需求的步骤如下: 1. 在el-tree中的node默认插槽中添加一个输入框,如下: ``` <el-tree :data="data"> <template slot="node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <el-input v-model="node.name"></el-input> </template> </el-tree> ``` 2. 在data中添加需要修改的节点的name属性,然后在用户编辑输入框中的内容更新该节点的name属性,如下: ``` data() { return { data: [ { label: '第一层', children: [ { label: '第二层', children: [ { label: '第三层', name: '节点名称' } ] } ] } ] } } ``` ``` <el-tree :data="data"> <template slot="node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <el-input v-model="node.name"></el-input> </template> </el-tree> ``` 3. 在用axios发送保存请求,将修改的节点数据传给后端,让后端修改相应节点的数据,如下: ``` methods: { saveNodeData(node) { axios.post('/api/saveNodeData', { node }).then(res => { console.log(res.data) }).catch(error => { console.log(error.response.data) }) } } ``` 通过以上几个步骤,即可实现el-tree中给每个节点后面添加输入框并保存数据的功能。注意,这只是实现的一个思路,具体实现还需要结合项目实际情况进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

jieyucx

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

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

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

打赏作者

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

抵扣说明:

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

余额充值