linux-in-web/src/views/settings/index.vue

<template>
  <el-container style="height: 100%;">
    <el-aside width="250px"
      style="background-color: rgb(238, 241, 246)">
      <el-menu unique-opened
        @select="handleSelect"
        active-text-color="black"
        :default-active="selectIndex">

        <el-menu-item index="sys_setting">
          <i class="el-icon-s-platform"></i>系统设置
        </el-menu-item>
        <el-menu-item index="net_setting">
          <i class="el-icon-s-tools"></i>网络设置
        </el-menu-item>

      </el-menu>
    </el-aside>

    <el-container>
      <el-main>
        <el-card style="height: 99%;">
          <sysSetting v-if="selectIndex == 'sys_setting'" />
          <netSetting v-else-if="selectIndex == 'net_setting'" />
        </el-card>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>
import netSetting from "./components/netSetting";
import sysSetting from "./components/sysSetting";
export default {
  data() {
    return {
      selectIndex: 'sys_setting'
    }
  },
  components: {
    sysSetting, netSetting
  },
  methods: {
    //处理选中菜单
    handleSelect(i, j) {
      this.selectIndex = i
    }
  }
};
</script>

<style scoped>
.el-aside {
  color: #333;
}

::v-deep .el-menu-item.is-active {
  background-color: #007fe0 !important;
}
</style>

<style>
.settings_title {
  color: grey;
}
</style>