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