aside改用setup方式。
This commit is contained in:
parent
ddb57c8961
commit
1763154fa2
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user