element中Tree 树形控件实现节点过滤和懒加载节点

在 Element UI 的 Tree 树形控件中，可以结合使用过滤和 show-checkbox 属性来实现节点过滤和只能选择可见节点的效果。具体实现步骤如下： 1. 设置 Tree 组件的 filter-node-method 属性，这个属性可以指定一个过滤方法，用于过滤不需要显示的节点。例如： ```html <template> <el-tree :data="data" :filter-node-method="filterNode" :show-checkbox="true" @check-change="handleCheckChange" ></el-tree> </template> <script> export default { data() { return { data: [ // 树形数据 ] } }, methods: { filterNode(value, data) { // 过滤节点的方法 // value 为搜索框中输入的值 // data 为当前节点的数据对象 // 返回 true 表示需要显示节点，返回 false 表示不需要显示节点 return data.label.indexOf(value) !== -1; }, handleCheckChange(data, checked) { // 处理节点选中事件 // data 为选中节点的数据对象 // checked 为选中状态，true 为选中，false 为取消选中 } } } </script> ``` 上面的代码中，我们设置了 filter-node-method 属性为 filterNode 方法。这个方法会在过滤节点时被调用，我们在这个方法中通过判断当前节点的 label 是否包含搜索框中输入的值来决定节点是否需要显示。 2. 在 handleCheckChange 方法中，需要判断当前选中的节点是否可见。如果节点不可见，则需要取消选中它。例如： ```javascript handleCheckChange(data, checked) { const node = this.$refs.tree.getNode(data.key); // 获取当前节点的 DOM 元素 if (node && !node.offsetParent) { // 如果节点不可见，则取消选中它 this.$refs.tree.setChecked(data.key, false); } } ``` 上面的代码中，我们首先通过 this.$refs.tree.getNode(data.key) 方法获取当前节点的 DOM 元素，然后判断这个元素的 offsetParent 属性是否为 null。如果为 null，说明节点不可见，我们就通过 this.$refs.tree.setChecked(data.key, false) 方法取消选中它。 通过上面的实现，我们就可以实现节点过滤和只能选择可见节点的效果了。