elementui中树结构el-tree和树结构过滤

最新推荐文章于 2024-08-14 10:51:33 发布

五颜六色的黑

最新推荐文章于 2024-08-14 10:51:33 发布

阅读量2.3k

点赞数 2

分类专栏： element-ui 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_38483133/article/details/121009472

版权

element-ui 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文展示了如何在Vue.js中使用el-tree组件创建一个包含树结构和日期信息的视图，并实现了节点过滤功能。通过定义treeData和handleDealFilter方法处理数据，filterNode方法实现节点过滤，当用户输入关键字时，树结构会动态显示匹配的节点。此外，还提供了节点点击事件handleNodeClick来处理用户交互。

摘要由CSDN通过智能技术生成

el-tree树标签结构处理支持树标签过滤
看下效果图先：是树结构和日期的组合结构

在这里插入图片描述
html代码

 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree">
                    <div style="display: flex; width: 100%" class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ data.namTag }}</span>
                        <p style="margin-left: auto !important; color: red">
                            {{ data.dataDate }}
                        </p>
                    </div>
                </el-tree>

js代码
定义treedata，为了避嫌，我把内容换一下哈哈哈，可能与上图内容不符合，但是换汤不换药哈，内容你们随便定义

//data中的数据
    defaultProps: {
                children: 'children',
                label: 'label'
            },
 treeData: [
                {
                    thmTag: '1111',
                    thmTagName: '树枝1',
                    tagList: [
                        {
                            idTag: '树枝编号1',
                            namTag: '树枝名称1',
                            typTag: '树枝11',
                            vals: ['选项1', '选项2'],
                            dataDate: '2021.02.12',
                            thmTag: '树枝11',
                            notTag: '树枝11',
                            vis: '树枝11',
                            effc: '树枝11',
                            datCre: '2021918',
                            manu: '自动111'
                        },
                        {
                            idTag: '标签编号1',
                            namTag: '标签222',
                            typTag: '标签类型111',
                            dataDate: '2021.12.12',
                            thmTag: '标签主题11',
                            vals: [],
                            notTag: '标签说明11',
                            vis: '是否显示11',
                            effc: '是否可用11',
                            datCre: '2021918',
                            manu: '自动111'
                        }
                    ]
                },
                {
                    thmTag: '22222',
                    thmTagName: '树枝2',
                    tagList: [
                        {
                            idTag: '树枝编号2',
                            namTag: '树枝2',
                            typTag: '树枝类型2',
                            dataDate: '2021.03.12',
                            thmTag: '树枝主题2',
                            notTag: '树枝说明2',
                            vals: ['选项c', '选项d'],
                            vis: '是否显示2',
                            effc: '是否可用2',
                            datCre: '2021918222',
                            manu: '自动22'
                        }
                    ]
                },
                {
                    thmTag: '333333',
                    thmTagName: '树枝3',
                    tagList: [
                        {
                            idTag: '树枝编号3',
                            namTag: '树枝名称3',
                            typTag: '树枝类型333',
                            dataDate: '2022.02.12',
                            thmTag: '树枝主题33',
                            notTag: '树枝说明33',
                            vals: ['选项fff', '选项gg'],
                            vis: '是否显示33',
                            effc: '是否可用33',
                            datCre: '2021918',
                            manu: '树枝333'
                        }
                    ]
                }
            ]

    mounted(){
       this.data = this.handleDealFilter(this.treeData);   
    }	
    
 	//methods中的方法
   //处理接口返回来的数据，用于dom显示
    handleDealFilter(arr) {
            let newArr = [];
            arr.forEach((item, index) => {
                let obj = {};
                obj.namTag = item.thmTagName;
                obj.number = '';
                obj.children = item.tagList;
                newArr.push(obj);
            });
            return newArr;
        },
        
	// 树结构过滤
	 filterNode(value, data) {
	            if (!value) return true;
	            return data.namTag.indexOf(value) !== -1;
	        },
	        
	handleNodeClick(){
	//点击树枝，你自己要干的事情
	}