fix: ref修复

This commit is contained in:
刘宗洋
2023-02-07 17:20:22 +08:00
parent 00fee24a85
commit db7b50d96a
4 changed files with 16 additions and 12 deletions

View File

@@ -4,7 +4,7 @@
<el-col :span="24"
:style="{ maxHeight: instanceMenuMaxHeight, height: instanceMenuMaxHeight, overflow: 'auto' }"
class="el-scrollbar flex-auto">
<el-menu background-color="transparent" :collapse-transition="false">
<el-menu background-color="transparent" :collapse-transition="false" ref="menuRef">
<!-- 第一级tag -->
<el-sub-menu v-for="tag of tags" :index="tag.tagPath" :key="tag.tagPath"
@click.stop="clickTag(tag.tagPath)">
@@ -24,7 +24,7 @@
</template>
<script lang="ts" setup>
import { reactive, toRefs } from 'vue';
import {reactive, ref, Ref, toRefs} from 'vue';
const props = defineProps({
instanceMenuMaxHeight: {
@@ -35,6 +35,7 @@ const props = defineProps({
},
})
const menuRef = ref(null) as Ref
const state = reactive({
instanceMenuMaxHeight: props.instanceMenuMaxHeight,
@@ -55,6 +56,14 @@ const clickTag = (tagPath: string) => {
state.opend[tagPath] = !opend
}
const open = (index: string) => {
menuRef.value.open(index)
}
defineExpose({
open
})
</script>
<style lang="scss">

View File

@@ -1,5 +1,5 @@
<template>
<tag-menu :instanceMenuMaxHeight="instanceMenuMaxHeight" :tags="instances.tags">
<tag-menu :instanceMenuMaxHeight="instanceMenuMaxHeight" :tags="instances.tags" ref="menuRef">
<template #submenu="props">
<!-- 第二级数据库实例 -->
<el-sub-menu v-for="inst in instances.tree[props.tag.tagId]" :index="'instance-' + inst.id"
@@ -122,7 +122,8 @@ const props = defineProps({
const emits = defineEmits(['initLoadInstances', 'changeInstance', 'loadTableNames', 'loadTableData', 'changeSchema'])
onBeforeMount(async () => {
await initLoadInstances()
await initLoadInstances()
await nextTick(()=>selectDb())
})
const menuRef = ref(null) as Ref
@@ -208,7 +209,6 @@ const selectDb = async (val?: any) => {
await loadTableNames({ id: dbId }, db, (res: any[]) => {
// 展开集合列表
menuRef.value.open(dbId + db + '-table')
console.log(res)
})
})
})
@@ -216,15 +216,10 @@ const selectDb = async (val?: any) => {
}
}
onMounted(() => {
selectDb();
})
watch(() => store.state.sqlExecInfo.dbOptInfo, async newValue => {
await selectDb(newValue)
})
</script>
<style lang="scss">

View File

@@ -1,5 +1,5 @@
<template>
<tag-menu :instanceMenuMaxHeight="state.instanceMenuMaxHeight" :tags="instances.tags">
<tag-menu :instanceMenuMaxHeight="state.instanceMenuMaxHeight" :tags="instances.tags" ref="menuRef">
<template #submenu="props">
<el-sub-menu v-for="inst in instances.tree[props.tag.tagId]" :index="'mongo-instance-' + inst.id"
:key="'mongo-instance-' + inst.id" @click.stop="changeInstance(inst, () => { })">

View File

@@ -1,5 +1,5 @@
<template>
<tag-menu :instanceMenuMaxHeight="state.instanceMenuMaxHeight" :tags="instances.tags">
<tag-menu :instanceMenuMaxHeight="state.instanceMenuMaxHeight" :tags="instances.tags" ref="menuRef">
<template #submenu="props">
<el-sub-menu v-for="inst in instances.tree[props.tag.tagId]" :index="'redis-instance-' + inst.id"
:key="'redis-instance-' + inst.id" @click.stop="changeInstance(inst)">