el-tree 过滤框中进行搜索，树数据中有匹配的数据 但报错了 XXX属性中取不到indexOf Cannot read properties of null (reading ‘indexOf‘)

• 【问题描述】

  • 在 el-tree 过滤框中进行搜索，树数据中有匹配的数据，但是报错了（Error in callback for watcher "filterFrom": "TypeError: Cannot read properties of null (reading 'indexOf')"），读取不到 indexOf

  

• 【问题原因】

  • 我们看一下tree数据进行过滤的方法

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1; // 此处的 label 是展示的树数据的展示文字（就是我们看到的文字），不同数据不一定是 label，具体看树数据字段名
    }
    

    • 过滤实际是将搜索框中数据在展示的文字中（此处是label字段）进行检索（图中绿色框框住的文字），
    • 检索到的话就返回当前数据，
    • 如果检索不到就不返回数据，

  • 此处报错可能有两种原因

    ① 取不到 label 字段（展示的文字对性的字段名），自然不会有 indexOf ，也就会报错，建议排查一下展示的文字对应的字段名是否为 label，如果不是，将 data.label.indexOf(value) !== -1 改为 data['展示的文字对性的字段名'].indexOf(value) !== -1

    

    ② data.label 的值的数据类型不是 字符串 或 其他有 indexOf 属性的数据类型，比如 null ，导致报错

    

• 【解决】

  ① 排查一下展示的文字对应的字段名是否为 label，如果不是，将 data.label.indexOf(value) !== -1 改为 data['展示的文字对性的字段名'].indexOf(value) !== -1

  ② 将展示文字为 null 的字段值写成空字符串 ''