133 lines
3.8 KiB
Vue
133 lines
3.8 KiB
Vue
<template>
|
|
<div :style="{ width: menuCollapse ? '40px' : props.width }"
|
|
style='transition: all 0.3s; overflow: hidden'>
|
|
<Icon
|
|
v-show='menuCollapse'
|
|
@click='onMenuCollapse'
|
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
|
:class="menuCollapse ? 'unfold' : ''"
|
|
size='18'
|
|
class='fold ml10 mt20 menu-collapse'
|
|
style='cursor: pointer'
|
|
/>
|
|
<div id='tree-index' class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
|
|
<div style='display: flex; align-items: center' class='mb10'>
|
|
<el-input v-model='filterText' placeholder='请输入内容' clearable>
|
|
<template #prefix>
|
|
<Icon name='el-icon-Search' style='font-size: 16px' />
|
|
</template>
|
|
</el-input>
|
|
<Icon
|
|
@click='onMenuCollapse'
|
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
|
:class="menuCollapse ? 'unfold' : ''"
|
|
size='18'
|
|
class='fold ml10 menu-collapse'
|
|
style='cursor: pointer'
|
|
v-if='props.canExpand'
|
|
/>
|
|
</div>
|
|
<el-tree-v2
|
|
style='flex: 1; overflow: auto'
|
|
ref='treeRef'
|
|
:props='defaultProps'
|
|
highlight-current
|
|
default-expand-all
|
|
:filter-node-method='filterNode'
|
|
:height='treeHeight'
|
|
v-bind='$attrs'
|
|
>
|
|
<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-v2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang='ts' setup>
|
|
import useCurrentInstance from '@/utils/useCurrentInstance'
|
|
import { ElTree } from 'element-plus'
|
|
import { onMounted, ref, watch } from 'vue'
|
|
|
|
defineOptions({
|
|
name: 'govern/tree'
|
|
})
|
|
|
|
interface Props {
|
|
width?: string
|
|
canExpand?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
width: '280px',
|
|
canExpand: true
|
|
})
|
|
const treeHeight = ref(0)
|
|
const { proxy } = useCurrentInstance()
|
|
const menuCollapse = ref(false)
|
|
const filterText = ref('')
|
|
const defaultProps = {
|
|
label: 'name',
|
|
value: 'id'
|
|
}
|
|
watch(filterText, val => {
|
|
treeRef.value!.filter(val)
|
|
})
|
|
const onMenuCollapse = () => {
|
|
menuCollapse.value = !menuCollapse.value
|
|
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
|
}
|
|
const filterNode = (value: string, data: any) => {
|
|
if (!value) return true
|
|
return data.name.includes(value)
|
|
}
|
|
const treeRef = ref<InstanceType<typeof ElTree>>()
|
|
defineExpose({ treeRef })
|
|
onMounted(
|
|
() => {
|
|
let dom = document.getElementById('tree-index')
|
|
if (dom) {
|
|
treeHeight.value = dom.offsetHeight - 68
|
|
}
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.cn-tree {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
:deep(.el-tree) {
|
|
border: 1px solid var(--el-border-color);
|
|
}
|
|
|
|
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
|
background-color: var(--el-color-primary-light-7);
|
|
}
|
|
|
|
.menu-collapse {
|
|
color: var(--el-color-primary);
|
|
}
|
|
}
|
|
|
|
.custom-tree-node {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|