解决 Uncaught TypeError: deptFormRef.value.validate is not a function 错误

根据提供的代码和错误信息，问题可能出在以下几个地方：

1. 在代码中，deptFormRef 是一个 ref，并且它的初始值是一个组件实例，而不是一个 DOM 元素。在提交表单时，调用 deptFormRef.value.validate 方法会导致 TypeError，因为组件实例没有 validate 方法。

解决方法是将 deptFormRef 的初始值设置为 DOM 元素，可以通过在组件的 mounted 钩子函数中获取 DOM 元素的引用并将其赋值给 deptFormRef。

const deptFormRef = ref(null);

// ...

mounted() {
deptFormRef.value = this.$refs.deptFormRef;
}

// ...

2. 在模板中，deptFormRef 应该绑定到 el-form 组件的 ref 属性上，而不是 el-tree-select 组件的 ref 属性上。所以需要将 deptFormRef 的绑定修改为：

<el-form ref="deptFormRef" :model="formData" :rules="rules" label-width="120px">

3. 在 handleSubmit 方法中，validate 方法的回调函数参数类型应为 boolean，而不是 any。修改为：

deptFormRef.value.validate((valid: boolean) => {
  // ...
});

综上所述，修改后的代码应如下所示：

const deptFormRef = ref(null);

function handleSubmit() {
  loading.value = true;
deptFormRef.value.validate((valid: boolean) => {
    console.log("按下了提交按钮");
    if (valid) {
      addOrUpdateDept(formData)
        .then(() => {
          ElMessage.success("操作成功");
          closeDialog();
          resetQuery();
        })
        .finally(() => (loading.value = false));
    }
  });
}

<el-form ref="deptFormRef" :model="formData" :rules="rules" label-width="120px">
  <el-form-item label="上级部门" prop="parentId">
    <el-tree-select v-model="formData.parentId" clearable :data="deptList" node-key="id"
      check-strictly :default-expanded-keys="[formData.parentId]"
      :default-checked-keys="[formData.parentId]" :props="{ label: 'deptId', value: 'deptId' }"
      :suffix-icon="CaretBottom" style="width: 450px" />
  </el-form-item>
</el-form>