树

src/components/tree/index.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="cn-tree">
+        <el-input v-model="filterText" placeholder="请输入内容" clearable style="margin-bottom: 10px">
+            <template #prefix>
+                <Icon name="el-icon-Search" style="font-size: 16px" />
+            </template>
+        </el-input>
+        <el-tree
+            style="flex: 1"
+            ref="treeRef"
+            :props="defaultProps"
+            v-bind="$attrs"
+            highlight-current
+            default-expand-all
+            :filter-node-method="filterNode"
+        >
+            <template #default="{ node, data }">
+                <span class="custom-tree-node">
+                    <Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" v-if="data.icon" />
+                    <span style="margin-left: 4px">{{ node.label }}</span>
+                </span>
+            </template>
+        </el-tree>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+
+defineOptions({
+    name: 'govern/tree'
+})
+const filterText = ref('')
+const treeRef = ref()
+const defaultProps = {
+    label: 'name',
+    value: 'id'
+}
+watch(filterText, val => {
+    treeRef.value!.filter(val)
+})
+const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.name.includes(value)
+}
+</script>
+<style lang="scss" scoped>
+.cn-tree {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 10px;
+    height: 100%;
+    width: 280px;
+    :deep(.el-tree) {
+        background: #efeff0;
+    }
+    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+        background-color: var(--el-color-primary-light-7);
+    }
+}
+.custom-tree-node {
+    display: flex;
+    align-items: center;
+}
+</style>