优化滚动
This commit is contained in:
parent
e931a70e6c
commit
7bed9df928
@ -3,8 +3,8 @@
|
||||
<el-config-provider v-bind="globalConfig">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<div style="height: 100vh">
|
||||
<component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component"
|
||||
<div style="height: 100vh" class="overflow-auto">
|
||||
<component v-if="route.meta.keepAlive != null && (route.meta.groups ? true: route.meta.keepAlive === false)" :is="Component"
|
||||
:key="route.meta.groups ? route.meta.groups : route.path"/>
|
||||
<keep-alive v-else>
|
||||
<component :is="Component" :key="route.meta.groups ? route.meta.groups : route.path"/>
|
||||
|
||||
@ -45,6 +45,7 @@ watch(route,()=>{
|
||||
return
|
||||
}
|
||||
|
||||
console.log("route change", route.path)
|
||||
let index = tabs.value.findIndex(item => item.name === name)
|
||||
if(index === -1){
|
||||
globalTabsState.addTab({
|
||||
@ -90,23 +91,27 @@ function tabRemove(name){
|
||||
|
||||
<template>
|
||||
<el-tabs v-model="tab" @tab-change="tabChange" @tab-remove="tabRemove" style="height:100%" class="tab-scaffold">
|
||||
<el-tab-pane
|
||||
v-for="item in tabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:closable="item.closable == null || item.closable"
|
||||
:name="item.name">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="h-full">
|
||||
<component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component" :key="route.path"/>
|
||||
<keep-alive v-else>
|
||||
<component :is="Component" :key="route.path"/>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</transition>
|
||||
</router-view>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane
|
||||
v-for="item in tabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:closable="item.closable == null || item.closable"
|
||||
:name="item.name">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<el-scrollbar height="100%" class="scroll-bar">
|
||||
<div class="h-full">
|
||||
<component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component" :key="route.path"/>
|
||||
<keep-alive v-else>
|
||||
<component :is="Component" :key="route.path"/>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</transition>
|
||||
</router-view>
|
||||
</el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
@ -114,10 +119,15 @@ function tabRemove(name){
|
||||
.tab-scaffold {
|
||||
& > ::v-deep(.el-tabs__content) {
|
||||
height: calc(100% - 55px);
|
||||
}
|
||||
|
||||
& > ::v-deep(.el-tabs__content .el-tab-pane) {
|
||||
height: 100%;
|
||||
& .el-tab-pane {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
& .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,15 +19,16 @@ const routes = [
|
||||
component: ()=>import("src/views/tabs/home/Home.vue"),
|
||||
meta: {
|
||||
title: "首页",
|
||||
groups: "/"
|
||||
groups: "/",
|
||||
keepAlive: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "environment",
|
||||
path: "/environment",
|
||||
component:()=>import("src/views/tabs/environment/index.vue"),
|
||||
meta:{
|
||||
title: "环境变量",
|
||||
groups: "/"
|
||||
groups: "/",
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
10
app/wails/frontend/src/utils/fixed/el-tablev2.js
Normal file
10
app/wails/frontend/src/utils/fixed/el-tablev2.js
Normal file
@ -0,0 +1,10 @@
|
||||
import {ref, watch} from "vue";
|
||||
import {useRoute} from "vue-router";
|
||||
|
||||
export function keepAliveFixed(tableRef){
|
||||
const route = useRoute()
|
||||
watch(route,()=>{
|
||||
// 虚拟表格 keepAlive 切换后渲染空白 需要手动重新滚回顶部 以正常显示
|
||||
tableRef.value?.scrollToTop(0)
|
||||
})
|
||||
}
|
||||
@ -1,7 +1,9 @@
|
||||
<script setup>
|
||||
import {reactive} from "vue";
|
||||
import {reactive, ref, watch} from "vue";
|
||||
import {GetAllEnv} from "frontend/wailsjs/go/env/Env";
|
||||
import {ElAutoResizer} from "element-plus";
|
||||
import {useRoute} from "vue-router";
|
||||
import {keepAliveFixed} from "src/utils/fixed/el-tablev2";
|
||||
|
||||
const table = reactive({
|
||||
columns: [
|
||||
@ -24,6 +26,9 @@ const table = reactive({
|
||||
data: []
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
keepAliveFixed(tableRef)
|
||||
|
||||
GetAllEnv().then((data)=>{
|
||||
table.data = Object.entries(data).map(item => {
|
||||
return {
|
||||
@ -38,7 +43,7 @@ GetAllEnv().then((data)=>{
|
||||
<div style="height: 100%">
|
||||
<el-auto-resizer>
|
||||
<template #default="{ height, width}">
|
||||
<el-table-v2 mb-1 :height="height" :width="width" :data="table.data" :columns="table.columns">
|
||||
<el-table-v2 mb-1 :height="height" :width="width" :data="table.data" :columns="table.columns" ref="tableRef">
|
||||
<template #cell="scope">
|
||||
<el-tooltip teleported>
|
||||
<template #content>
|
||||
|
||||
@ -42,7 +42,7 @@ spring:
|
||||
driver-class-name: com.mysql.cj.jdbc.Driver
|
||||
username: root
|
||||
password: 12341234
|
||||
url: jdbc:mysql://10.10.10.200:3306/matrix_v2?createDatabaseIfNotExist=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
|
||||
url: jdbc:mysql://10.10.10.200:3306/matrix_v2?createDatabaseIfNotExist=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&autoReconnect=true
|
||||
# jdbc-url: jdbc:mysql://10.10.10.100:3306/matrix?createDatabaseIfNotExist=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
|
||||
|
||||
rules:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user