vue 根据属性过滤树结构数据

如下为树结构数据，需要根据属性id 获取匹配的值

// 树结构数据
 export default {
    data() {
      return {
      
         searchId: 9,
        
        treeData: [{
          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'
          }]
        }],
      };
    }
  };

需要找出id为9的label值
设置一个过滤器

  filters: {
    treeText (val, treeData) {
      var text = ''
      let convert = (arr) => {
        arr.filter((item) => {
          if (item.id == val) {
            text = item.label
          } else {
            if (item.children) {
              return convert(item.children)
            }
          }
        })
      }
      convert(treeData)
      return text
    },
  },

在methods内使用时

 methods: {
    getLab(){
       let filter = this.$options.filters['treeText']
       let  lable = filter(this.searchId, this.treeData)
     }
}

在视图中使用时

<span>{{searchId | treeText (treeData)}}</span>

得到 label 值为 ‘三级 1-1-1’