封装树形组件
This commit is contained in:
ctw committed
1 parent
738d76247d
commit
bb4d31b494
5 files changed
+249
-48
No files matched your search
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 头部区域 -->
|
||||
<div class="container-header">
|
||||
<div class="container-header-input">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
suffix-icon="search"
|
||||
:placeholder="placeholder"
|
||||
clearable
|
||||
@change="getTreeData"
|
||||
/>
|
||||
</div>
|
||||
<div class="container-header-dropdown" v-if="showExpand">
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<el-icon style="transform: rotate(90deg)">
|
||||
<MoreFilled />
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
link
|
||||
:icon="isExpand ? 'expand' : 'fold'"
|
||||
@click="toggleRowExpansionAll(isExpand ? false : true)"
|
||||
>
|
||||
{{ isExpand ? "折叠" : "展开" }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 树形结构 -->
|
||||
<div class="container-tree">
|
||||
<el-tree
|
||||
ref="depTreeRef"
|
||||
:props="props.props"
|
||||
:data="state.treeList"
|
||||
:expand-on-click-node="false"
|
||||
:loading="state.loading"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ node, data }" v-if="$slots.default">
|
||||
<slot :node="node" :data="data" />
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
<!-- 底部区域 -->
|
||||
<div class="container-switch">
|
||||
<el-switch
|
||||
v-model="state.isDeep"
|
||||
@change="handleTreeDeepSearch"
|
||||
:inactive-text="switchInactiveText"
|
||||
:active-text="switchActiveText"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="dep-tree">
|
||||
import { useMessage } from "/@/hooks/message"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
placeholder?: string // 输入框占位符
|
||||
loading?: boolean // 加载中的状态
|
||||
showExpand?: boolean // 折叠控制
|
||||
query?: (searchName?: string) => Promise<any> // 查询函数
|
||||
props?: object
|
||||
switchInactiveText?: string | undefined
|
||||
switchActiveText?: string | undefined
|
||||
}>(),
|
||||
{
|
||||
placeholder: "",
|
||||
loading: false,
|
||||
showExpand: true,
|
||||
query: () => new Promise((resolve) => resolve([])),
|
||||
props: () => {
|
||||
return {
|
||||
label: "name",
|
||||
children: "children",
|
||||
value: "id",
|
||||
}
|
||||
},
|
||||
switchInactiveText: "当前级",
|
||||
switchActiveText: "当前级及子级",
|
||||
},
|
||||
)
|
||||
const emit = defineEmits(["nodeClick", "treeDeepSearch"])
|
||||
|
||||
const state = reactive({
|
||||
treeList: [],
|
||||
loading: props.loading,
|
||||
isDeep: false,
|
||||
})
|
||||
|
||||
const depTreeRef = ref()
|
||||
const searchName = ref() // 查询关键字
|
||||
const isExpand = ref(true) // 是否展开所有节点
|
||||
|
||||
// 获取部门树形结构数据
|
||||
const getTreeData = () => {
|
||||
if (props.query instanceof Function) {
|
||||
state.loading = true
|
||||
|
||||
// 调用传入的查询函数，并将查询关键字作为参数传入
|
||||
const result = props.query(unref(searchName))
|
||||
|
||||
// 如果查询结果为 Promise 类型，则进行后续处理
|
||||
if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
|
||||
result
|
||||
.then((r: any) => {
|
||||
state.treeList = r.data
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
.finally(() => (state.loading = false))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 点击树形结构节点
|
||||
const handleNodeClick = (item: any) => emit("nodeClick", item)
|
||||
|
||||
// 节点深度搜索
|
||||
const handleTreeDeepSearch = () => emit("treeDeepSearch", state.isDeep)
|
||||
|
||||
// 切换所有节点的展开/收起状态。status：true 为展开，false 为收起
|
||||
const toggleRowExpansionAll = (status: boolean) => {
|
||||
isExpand.value = status
|
||||
const nodes = depTreeRef.value.store._getAllNodes()
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
nodes[i].expanded = status
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTreeData()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
getTreeData,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
|
||||
&-input {
|
||||
width: 90%;
|
||||
}
|
||||
&-dropdown {
|
||||
flex: 1;
|
||||
margin-left: 5%;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-tree {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-switch {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user