一、基础信息设置

1、定义组件

实现目标：
在这里插入图片描述

一个页面里面有多个选项，可以通过elment组件的标签页。
在这里插入图片描述

在SysBasic.vue下面：

<template>
    <div>   <!-- activeName= 当打开页面时，要激活的是哪个页面。对应的是下面的name-->
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="部门管理" name="DepMana"><DepMana></DepMana></el-tab-pane>
            <el-tab-pane label="职位管理" name="PosMana"><PosMana></PosMana></el-tab-pane>
            <el-tab-pane label="职称管理" name="JoblevelMana"><JoblevelMana></JoblevelMana></el-tab-pane>
            <el-tab-pane label="奖惩规则" name="EcMana"><EcMana></EcMana></el-tab-pane>
            <el-tab-pane label="权限组" name="PermissMana"><PermissMana></PermissMana></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
	/* 在src/components/sys/basic/进行组件开发，写好以后，
	通过import引入进来，
	<DepMana></>... 引入到此位置。
	components，然后变成组件——》 */
    import DepMana from '../../components/sys/basic/DepMana'
    import EcMana from '../../components/sys/basic/EcMana'
    import JoblevelMana from '../../components/sys/basic/JoblevelMana'
    import PermissMana from '../../components/sys/basic/PermissMana'
    import PosMana from '../../components/sys/basic/PosMana'
 
    export default {
        name: "SysBasic",
        data() {
            return {
                activeName: 'DepMana'
            }
        },
        components:{
            DepMana,
            EcMana,
            JoblevelMana,
            PermissMana,
            PosMana
        }

    }
</script>

<style scoped>

</style>

2、页面设计

PosMana.vue