前言：Avue是element-ui的二次封装组件库，也是在vue基础上使用的。

avue-input-tree 是 Avue 框架中用于树形数据选择和展示的组件，常用于表单中选择层级结构数据（如部门、组织架构员工、分类、菜单等）。

开发中问题：

开发中遇到问题，在编辑时需要回显组织架构中已选择的员工，但是已离职的员工已不在组织架构，导致回显之后，点击清除按钮无法清除，清除功能失效。

原因：

当组件初始化时，绑定的v-model值中存在某些节点ID，但这些ID对应的节点不在当前的data数据源中。这时候，组件可能无法正确显示这些节点，导致无法通过清除按钮清除它们。这可能是因为组件在初始化时只根据data中的数据来验证v-model中的值，如果值对应的节点不存在，组件可能无法正确处理这些值，导致清除按钮失效。

解决方法：

过滤无效值：初始化时清理非法数据，

在组件初始化时，检查 v-model 绑定的值是否存在于数据源中，若不存在则自动清除。

export default {
  data() {
    return {
      selectedValue: [99], // 假设 99 不在数据源中
      treeData: [/* 树形数据 */]
    };
  },
  mounted() {
    // 过滤无效值
    this.selectedValue = this.selectedValue.filter(id => 
      this.checkNodeExists(this.treeData, id)
    );
  },
  methods: {
    // 递归检查节点是否存在
    checkNodeExists(nodes, targetId) {
      return nodes.some(node => {
        if (node.id === targetId) return true;
        if (node.children) {
          return this.checkNodeExists(node.children, targetId);
        }
        return false;
      });
    }
  }
};

感谢观看！！！