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