element ui tree 树形控件添加节点过滤和show-checkbox后，过滤节点后如何控制只能选择到可见节点

在 Element UI 的 Tree 树形控件中，可以结合使用过滤和 show-checkbox 属性来实现节点过滤和只能选择可见节点的效果。具体实现步骤如下：

1. 设置 Tree 组件的 filter-node-method 属性，这个属性可以指定一个过滤方法，用于过滤不需要显示的节点。例如：

<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 方法中，需要判断当前选中的节点是否可见。如果节点不可见，则需要取消选中它。例如：

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) 方法取消选中它。

通过上面的实现，我们就可以实现节点过滤和只能选择可见节点的效果了。