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

View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-02-02 22:19:12 * @Date: 2023-02-02 22:19:12
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-02-05 11:52:27 * @LastEditTime: 2023-02-05 23:05:12
* @FilePath: /IT/src/views/requirement/RequirementManager.vue * @FilePath: /IT/src/views/requirement/RequirementManager.vue
* @Description: * @Description:
* *
@ -39,7 +39,7 @@
<el-col :span="4"> <el-col :span="4">
<!-- <el-input v-model="query_param.status"></el-input> --> <!-- <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-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-select>
</el-col> </el-col>
<el-col :span="6"></el-col> <el-col :span="6"></el-col>