FE_occupationlab_server/src/pages/information/contentManage/index.vue

<template>
    <!--  内容管理  -->
    <div>
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="menu-con">
                    <el-menu
                        ref="columnMenu"
                        unique-opened
                        text-color="#303133"
                        :default-active="activeName"
                        @select="handleSelect"
                    >
                        <template v-for="item in menuList">
                            <template v-if="item.secondColumn && item.secondColumn.length">
                                <el-submenu :index="item.id">
                                    <template slot="title">
                                        <span>{{ item.name }}</span>
                                    </template>
                                    <el-menu-item v-for="item2 in item.secondColumn" :index="item2.id">{{ item2.name }}</el-menu-item>
                                </el-submenu>
                            </template>
                            <template v-else>
                                <el-menu-item :index="item.id">{{ item.name }}</el-menu-item>
                            </template>
                        </template>
                    </el-menu>
                </div>
            </el-col>
            <el-col :span="21">
                <ContentList v-show="menuList.length" :columnId="columnId" />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import ContentList from "./contentList";
import { mapActions } from "vuex";

export default {
    name: "contentManage",
    components: {
        ContentList
    },
    data() {
        return {
            menuList: [],
            activeName: this.$store.state.info.columnId,
            columnId: ""
        };
    },
    mounted() {
        this.getMenuData();
    },
    methods: {
        ...mapActions("info", [
            "setColumnId"
        ]),
        getMenuData() {
            this.$get(this.api.queryAllColumns, { page: 1, size: 10000 }).then(res => {
                this.menuList = res.columnTree;
                if (this.menuList.length) {
                    if (this.menuList[0].secondColumn && this.menuList[0].secondColumn.length) {
                        this.columnId = this.menuList[0].secondColumn[0].id;
                    } else {
                        this.columnId = this.menuList[0].id;
                    }
                    if (!this.$store.state.info.columnId) {
                        this.setColumnId(this.columnId);
                    } else {
                        this.columnId = this.$store.state.info.columnId;
                    }
                }
            }).catch(err => {
            });
        },
        handleSelect(key, keyPath) {
            this.columnId = key;
            this.setColumnId(key);
        }
    }
};
</script>

<style lang="scss" scoped>
.menu-con {
    // 改的
    height: calc(100vh - 250px);
    border-right: solid 1px #e6e6e6;
    background-color: #F2F6FC;
    // overflow: hidden;

    .el-menu {
        background-color: transparent;

        .el-submenu {
            background-color: transparent;
        }

        .el-menu-item.is-active {
            color: #ffffff;
            background-color: #9278FF;
        }
    }
}
</style>