树形数据递归过滤

树形数据过滤

说明: 遇到问题树形数据过滤, 并保留原有树形结构不变, 即如果有子集被选中,父级同样保留

寻找解决办法

思路: 
	1. 对数据进行处理, 根据过滤标识对匹配的数据添加标识 例如: visible: true
	2. 对有标识的子集的父级添加 visible 标识
	3. 数据根据visible 标识进行递归过滤得到过滤后的数据

代码实现

	// 根据传入的值进行数据匹配, 并返回匹配结果
	filterMethod(val, data, filterType) {
      return data[filterType].includes(val)
    },
    /*
	*	对表格数据进行处理
	*	data 为树形数据数组
	*	filter 为过滤参数即用户输入的值
	*	filterType 为用户通过什么字段与filter 匹配
	*/
	tableFilter(data, filter, filterType) {
      const traverse = (data) => {
        data.forEach(child => {
          child.visible = this.filterMethod(filter, child, filterType)
          if(child.children) traverse(child.children)
          if (!child.visible && child.children.length) {
            let visible = !child.children.some(child => child.visible);
            child.visible = visible === false;
          }
        })
      }
      traverse(data)
      return this.filterDataByVisible(data)
    },
    // 递归过滤符合条件的数据
    filterDataByVisible(data) {
      return data.filter(item => {
        if (item.children) {
          item.children = this.filterDataByVisible(item.children)
        }
        if (item.visible) {
          return true
        }
      })
    },