aside改用setup方式。

This commit is contained in:
Kane 2023-02-05 23:42:07 +08:00
parent ddb57c8961
commit 1763154fa2
2 changed files with 28 additions and 23 deletions

View File

@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2023-01-04 11:30:33
* @LastEditors: Kane
* @LastEditTime: 2023-02-05 10:47:17
* @LastEditTime: 2023-02-05 23:38:54
* @FilePath: /IT/src/layout/components/Aside.vue
* @Description:
*
@ -12,7 +12,7 @@
<el-scrollbar class="wrapper" height="400px">
<el-menu id="side-bar" router :default-active="currentPath" background-color="#2f4156" text-color="#fff"
active-text-color="#ffd04b" :collapse="asideCollapse">
<template v-for="route in this.routers" :key="route.path">
<template v-for="route in routes" :key="route.path">
<template v-if="!route.hidden">
<template v-if="hasOnlyChild(route.children)">
<!-- 当只有一个子路由时直接渲染子路由 -->
@ -46,19 +46,20 @@
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
name: "LayoutAside",
data()
setup()
{
return {
routers: null,
};
},
methods: {
const router = useRouter();
const routes = router.getRoutes();
const store = useStore();
//
hasOnlyChild: function (children)
const hasOnlyChild = (children) =>
{
//
if (!children)
@ -78,27 +79,31 @@ export default {
}
return false;
},
};
},
computed: {
//
//
currentPath()
const currentPath = computed(() =>
{
let path = useRoute().path;
return path;
},
});
//
asideCollapse()
const asideCollapse = computed(() =>
{
return this.$store.state.app.ui.asideBarCollapse;
}
return store.state.app.ui.asideBarCollapse;
});
return {
router,
routes,
hasOnlyChild,
currentPath,
asideCollapse,
};
},
created()
{
this.routers = useRouter().options.routes;
}
};
</script>

View File

@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2023-02-02 22:19:12
* @LastEditors: Kane
* @LastEditTime: 2023-02-05 11:52:27
* @LastEditTime: 2023-02-05 23:05:12
* @FilePath: /IT/src/views/requirement/RequirementManager.vue
* @Description:
*
@ -39,7 +39,7 @@
<el-col :span="4">
<!-- <el-input v-model="query_param.status"></el-input> -->
<el-select multiple collapse-tags collapse-tags-tooltip v-model.trim.lazy="query_param.status">
<el-option v-for="option in statusData" :value="option.status_name" :key="option.status_code + option.status_name"></el-option>
<el-option v-for="option in statusData" :value="option.status_name" lable="option.status_code" :key="option.status_code + option.status_name"></el-option>
</el-select>
</el-col>
<el-col :span="6"></el-col>