Vue3 + Element Plus 实现可搜索、可折叠、可拖拽的部门树组件功能

---
## 代码实现
下面是完整的 `DeptTree.vue` 代码：
```vue
<!-- DeptTree.vue -->
<template>
  <el-aside :style="{ width: leftWidth + 'px', height: props.height }" class="left-pane">
    <!-- 搜索 -->
    <el-input
      v-if="props.showFilter"
      v-model="deptName"
      placeholder="请输入部门名称"
      clearable
      size="small"
      prefix-icon="Search"
      class="filter-tree"
    />
    <!-- 树 -->
    <el-tree
      ref="deptTreeRef"
      :data="deptOptions"
      :props="{ label: 'name', children: 'children' }"
      node-key="id"
      highlight-current
      :default-expanded-keys="expandedKeys"
      @node-click="onNodeClick"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
    >
      <template #default="{ node }">
        <div
          class="tree-node"
          :class="{ 'is-current': node.isCurrent }"
          @click.stop="selectNode(node)"
        >
          <el-icon v-if="node.children && node.children.length" class="arrow">
            <component :is="node.expanded ? ArrowDown : ArrowRight" />
          </el-icon>
          <el-icon v-else class="leaf"><Tickets /></el-icon>
          <span class="label">{{ node.label }}</span>
        </div>
      </template>
    </el-tree>
  </el-aside>
  <!-- 拖拽栏 -->
  <div class="resize-bar" @mousedown="startResize">
    <el-icon class="collapse-icon" @click.stop="toggleCollapse">
      <component :is="leftWidth === 0 ? ArrowRight : ArrowLeft" />
    </el-icon>
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";
import { ArrowLeft, ArrowRight, ArrowDown, Tickets, Search } from "@element-plus/icons-vue";
const props = defineProps({
  deptOptions: Array,
  leftWidth: { type: Number, default: 280 },
  height: { type: String, default: "100%" },
  showFilter: { type: Boolean, default: true },
  defaultExpand: { type: Boolean, default: false },
});
const emit = defineEmits(["node-click", "update:leftWidth"]);
const deptName = ref("");
const deptTreeRef = ref(null);
const leftWidth = ref(props.leftWidth);
const expandedKeys = ref([]);
// 默认展开一级
watch(() => props.deptOptions, val => {
  if (val?.length) expandedKeys.value = val.map(i => i.id);
}, { immediate: true });
// 过滤节点
const filterNode = (val, data) => !val || data.name.includes(val);
watch(deptName, val => deptTreeRef.value?.filter(val));
// 拖拽
let startX = 0, isResizing = false;
const startResize = e => {
  isResizing = true;
  startX = e.clientX;
  document.addEventListener("mousemove", updateResize);
  document.addEventListener("mouseup", stopResize);
};
const updateResize = e => {
  if (!isResizing) return;
  leftWidth.value += e.clientX - startX;
  startX = e.clientX;
};
const stopResize = () => {
  isResizing = false;
  document.removeEventListener("mousemove", updateResize);
  document.removeEventListener("mouseup", stopResize);
};
// 折叠/展开
const toggleCollapse = () => {
  leftWidth.value = leftWidth.value === 0 ? 280 : 0;
  emit("update:leftWidth", leftWidth.value);
};
// 节点选中逻辑
const clearCurrent = nodes => nodes?.forEach(n => {
  n.isCurrent = false;
  n.children && clearCurrent(n.children);
});
const selectNode = node => {
  clearCurrent(props.deptOptions);
  node.isCurrent = true;
  emit("node-click", node);
};
const onNodeClick = node => selectNode(node);
</script>
<style scoped lang="scss">
.left-pane { background:#fff; overflow:hidden; border-right:1px solid #eee; padding:12px; }
.filter-tree { margin-bottom:12px; }
.tree-node {
  display:flex; align-items:center; padding:4px 8px; border-radius:4px; cursor:pointer; transition: all .2s;
  &.is-current { background:#f0f5ff; color:var(--el-color-primary); }
  &:hover { background:#f5f7fa; }
  .arrow, .leaf { font-size:14px; margin-right:6px; }
  .label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
}
.resize-bar { width:8px; cursor:ew-resize; background:#f0f2f5; display:flex; align-items:center; justify-content:center; }
.collapse-icon { font-size:20px; color:#aaa; cursor:pointer; padding:4px; }
</style>

<template>
  <el-container style="height: 100vh">
    <DeptTree
      :deptOptions="deptOptions"
      :leftWidth="leftWidth"
      ref="deptTreeRef"
      @node-click="handleNodeClick"
    />
    <el-main>
      <h3>右侧内容区域</h3>
    </el-main>
  </el-container>
</template>
<script setup>
import { ref } from "vue";
import DeptTree from "./components/DeptTree.vue";
const deptOptions = ref([
  { id: 1, name: "技术部", children: [{ id: 11, name: "前端组" }, { id: 12, name: "后端组" }] },
  { id: 2, name: "市场部" },
]);
const leftWidth = ref(280);
const handleNodeClick = node => console.log("点击节点", node);
</script>