vue中使用el-table筛选tree树形结构的数据
实现难点：
1.对于普通列数据el-table表格可做到多条件筛选，但是对于带tree树形结构类型的数据只能筛选到最上层节点，子节点不会筛选
2.考虑到缺陷，因此查看文档只能通过文档提供的filter-change事件手动筛选数据。
思路：1.通过filter-change事件使用filterObj对象保存点击的筛选状态
2.先将当前树形数据转变成普通列数据，再进行手动过滤，过滤后以 普通列数据展示
3.当无筛选条件时再以树形结构展示
图例：
实现步骤：
1.数据初始化
data:{
return{
targetNode:{},//总数据，保持tree数据类型
tableData:[],//展示在table上的数据
filterObj:{isEnable:[],filterTypeAttr:[],filterTypeCondition:[]},//过滤条件,由于表 格组件filterchange方法只会提示当前的筛选项，
//所以使用filterObj来保存所有筛选过的选项
}
}2.表格
{{(scope.$index + 1)}}
{{ scope.row.filterName }}
{{ scope.row.filterTypeAttr==1?'自定义':
scope.row.filterTypeAttr==2?'机构名称':''}}
{{filterObj.filterTypeAttr.length==3?'筛选类型属性-全部':'筛选类型
属性'+(filterObj.filterTypeAttr.includes(1)?'-自定义':'')+
(filterObj.filterTypeAttr.includes(2)?'-机构名称':'')+
(filterObj.filterTypeAttr.includes(0)?'-无':'')}}
{{ scope.row.filterTypeCondition==1?'1-筛选类型':'2-筛选条件'}}
{{filterObj.filterTypeCondition.length==0?'标识':filterObj.filterTypeCondition.length==1 && filterObj.filterTypeCondition[0]==1?'标识-1-筛选类型':filterObj.filterTypeCondition.length==1 && filterObj.filterTypeCondition[0]==2?'标识-2-筛选条件':'标识-全部'}}
{{scope.row.defaultSelected==1?'是':scope.row.defaultSelected==0?'否':''}}
规则式
编辑
删除
{{ scope.row.isEnable==1?'启用':'禁用'}}
{{filterObj.isEnable.length==0?'状态'
:filterObj.isEnable.length==1 && filterObj.isEnable[0]==1?'状态-启用'
:filterObj.isEnable.length==1 && filterObj.isEnable[0]==0?'状态-禁用':'状态-全部'}}
要点：
- default-expand-all:默认展开全部子节点
-
filterChange：获取点击的筛选条件状态，对应列表头上设置:filters属性的列
-
设置筛选后用来替换表头的label内容
3.filterChange函数
filterChange(filters){//触发过滤事件时过滤数据
console.log('filters',filters);
if(filters['isEnable']){
this.filterObj['isEnable'] = filters['isEnable'].map(Number);
}
if(filters['filterTypeAttr']){
this.filterObj['filterTypeAttr'] = filters['filterTypeAttr'].map(Number);
}
if(filters['filterTypeCondition']){
this.filterObj['filterTypeCondition'] = filters['filterTypeCondition'].map(Number);
}
if(this.filterObj['isEnable'].length==0 && this.filterObj['filterTypeAttr'].length==0 && this.filterObj['filterTypeCondition'].length==0){
this.tableData = this.targetNode.filterList;
}else{
let dataList = [];
this.targetNode.filterList.forEach(item=>{//层级数据转变成普通列数据
let obj = {
filterName:item.filterName,
filterTypeAttr:item.filterTypeAttr,
sort:item.sort,
isEnable:item.isEnable,
columnId:item.columnId,
id:item.id,
filterTypeCondition:1,
index:item.index
}
dataList.push(obj);
if(item.children){
dataList = dataList.concat(this.getLineData(item.children))
}
})
console.log('线性数据',dataList);
if(this.filterObj['isEnable'].length>0){//状态
dataList = dataList.filter(item=>{
return this.filterObj['isEnable'].includes(item.isEnable)
})
}
if(this.filterObj['filterTypeCondition'].length>0){//标识
dataList = dataList.filter(item=>{
return this.filterObj['filterTypeCondition'].includes(item.filterTypeCondition)
})
}
if(this.filterObj['filterTypeAttr'].length>0){//属性
console.log('11',this.filterObj['filterTypeAttr']);
dataList = dataList.filter(item=>{
return this.filterObj['filterTypeAttr'].includes(item.filterTypeAttr?item.filterTypeAttr:0)
})
}
console.log('过滤数据',dataList);
this.tableData = dataList;
}
},
getLineData(data){//层级数据变成行数据
let list = [];
data.forEach(item=>{
let obj = {};
if(item.filterTypeCondition==1){//筛选类型
obj = {
filterName:item.filterName,
filterTypeAttr:item.filterTypeAttr,
sort:item.sort,
isEnable:item.isEnable,
parentId:item.parentId,
id:item.id,
filterTypeCondition:1,
index:item.index
}
}else{
obj = {
filterName:item.filterName,
sort:item.sort,
isEnable:item.isEnable,
parentId:item.parentId,
id:item.id,
defaultSelected:item.defaultSelected,
filterTypeCondition:2,
index:item.index
}
}
list.push(obj);
if(item.children){
list = list.concat(this.getLineData(item.children))
}
})
return list;
},步骤：
1.fiters参数为当前点击的筛选项，数据结构如下：
2.使用filterObj保存当前筛选状态，筛选重置时为[]空数组
3.保存后判断filterObj各项是否都是空数组，是则直接赋值
4.否则将树形结构转换成普通列数据，注意考虑浅克隆的问题，getLineData函数作用是将子节点children也插入到普通列中
5.数据转换成普通列数据后进行过滤
实现效果：
