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

View File

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

View File

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

View File

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