elementui 树形结构filter-node-method原理

在 ElementUI 中，tree 组件提供了 `filter-node-method` 属性来实现树形结构的筛选。这个属性接收一个函数作为参数，并且函数在每个节点数据上执行以确定其是否显示。

具体原理是，当设置了 `filter-node-method` 属性后，tree 组件将会遍历每个节点数据，对每个节点数据调用指定的函数。这个函数接收节点数据作为参数，并且返回值决定了节点是否显示。如果返回 `true`，表示该节点会显示；如果返回 `false`，该节点将被隐藏。

因此，通过在 `filter-node-method` 属性中定义一个函数，并在函数中根据某些条件来决定节点是否显示，可以实现树形结构的筛选功能。

例如，下面是一个示例代码，根据节点的名称来筛选节点：

```html :data=\"data\"

:filter-node-method=\"filterNode\" > ```

```javascript export default { data() { return {

data: [

{ label: 'Node 1', children: [ { label: 'Child 1' }, { label: 'Child 2' } ]},

{ label: 'Node 2', children: [ { label: 'Child 3' }, { label: 'Child 4' } ]},

{ label: 'Node 3', children: [ { label: 'Child 5' }, { label: 'Child 6' } ]} ] }; },

methods: {

filterNode(value, data) { if (!value) return true;

return data.label.includes(value); } } }; ```

在上面的代码中，`filterNode` 方法接收两个参数：`value` 表示当前输入的条件，`data` 表示当前节点的数据。在该方法中，如果 `value` 为空，则将返回 `true`，表示所有节点都显示；否则，将根据节点名称是否包含 `value` 来决定节点的显示与隐藏。