elementUIel-tree搜索时加载子节点对应父节点父节点对应子节点树

Posted 2022-02-02 征途黯然.

官网给的例子只能搜索树形图中与关键字匹配的级别：

<el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>

<el-tree
  class="filter-tree"
  :data="data2"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree2">
</el-tree>

<script>
  export default 
    watch: 
      filterText(val) 
        this.$refs.tree2.filter(val);
      
    ,

    methods: 
      filterNode(value, data) 
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      
    ,

    data() 
      return 
        filterText: '',
        data2: [
          id: 1,
          label: '一级 1',
          children: [
            id: 4,
            label: '二级 1-1',
            children: [
              id: 9,
              label: '三级 1-1-1'
            , 
              id: 10,
              label: '三级 1-1-2'
            ]
          ]
        , 
          id: 2,
          label: '一级 2',
          children: [
            id: 5,
            label: '二级 2-1'
          , 
            id: 6,
            label: '二级 2-2'
          ]
        , 
          id: 3,
          label: '一级 3',
          children: [
            id: 7,
            label: '二级 3-1'
          , 
            id: 8,
            label: '二级 3-2'
          ]
        ],
        defaultProps: 
          children: 'children',
          label: 'label'
        
      ;
    
  ;
</script>

使用改进的方法可以搜索出一整条路径：

filterNode(value,data,node) 
	if(!value)
		return true;
	
	let level = node.level;
	let _array = [];//这里使用数组存储 只是为了存储值。
	this.getReturnNode(node,_array,value);
	let result = false;
    _array.forEach((item)=>
		result = result || item;
    );
    return result;
,
getReturnNode(node,_array,value)
	let isPass = node.data &&  node.data.label && node.data.label.indexOf(value) !== -1;
	isPass?_array.push(isPass):'';
	this.index++;
	console.log(this.index)
	if(!isPass && node.level!=1 && node.parent)
		this.getReturnNode(node.parent,_array,value);
	
,