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

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

elementui中树结构el-tree和树结构过滤_第1张图片
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(){
	//点击树枝,你自己要干的事情
	}

你可能感兴趣的:(element-ui,elementui,前端,javascript)