spfm-market-front/src/pages/main/terminal/terminalhome.vue

<template>
    <div class="inner-container">
        <div class="tabBox">
            <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="(item, index) in routerList" :key="index" :name="item.path" :label="item.label">
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="infoBox">
            <router-view />
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activeName: "",
                showList: [],
                routerList: [
                    {
                        label: "测试终端管理",
                        path: "/terminal",
                        name: "terminal"
                    },
                    {
                        label: "测试终端申请",
                        path: "/terminalApply",
                        name: "terminalApply"
                    },
                    {
                        label: "终端型号管理",
                        path: "/terminalModel",
                        name: "terminalModel"
                    },
                    {
                        label: "终端台账管理",
                        path: "/terminalStandbook",
                        name: "terminalStandbook"
                    },
                ],
            };
        },
        computed: {
            menuList: function() {
                let arr = [];
                this.routerList.map((item) => {
                    this.showList.map((row) => {
                        if (item.path == row) {
                            arr.push(item);
                        }
                    });
                });
                return arr;
            },
        },
        methods: {
            handleClick(val) {
                if (this.$route.path != this.activeName) {
                    this.$router.push(this.activeName);
                }
            },
        },
        mounted() {
            this.activeName = this.$route.path;
        },
        created() {
            JSON.parse(sessionStorage.childrenMenus).map((item) => {
                this.showList.push(item.jspUrl);
            });
        },
        watch: {
            $route(to, from) {
                this.activeName = this.$route.path;
            },
        },
    };
</script>
<style>
    .el-tabs__content {
        display: none;
    }
    .inner-container{
        display: flex;
        justify-content: space-between;
    }
    .tabBox{
        width: 135px;
    }
    .infoBox{
        background: #f4f4f4!important;
        height: 100%;
        width: calc(100% - 135px)
    }
</style>