21、主页:通过双层for循环渲染左侧菜单

外层for循环用来渲染一级菜单,内层渲染for循环用来渲染二级菜单。

在一级菜单里添加v-for指令,再提供唯一的key属性。key值有id就用id。

<!-- 一级菜单 -->
<el-submenu
  v-for="item in menulist"
  :key="item.id"
>

这时候出现了五个“导航栏一”,文本都是写死的,把每个item项对应的authname属性当作名称,给span标签动态绑定名称。

<span>{{ item.authName }}</span>

这样,五个菜单就都渲染出来了。

但是展开一个菜单,其他四个也都展开了。此时,需要给这个一级菜单指定唯一的index值,按照正常逻辑,每一个菜单都有独属于自己的index值,id值就是唯一的。
但是index值只接收字符串,不接收数值,可以在后面加上一个空字符串。数值和字符串拼接,得到的是字符串。

<el-submenu
  :index="item.id + ''"
  v-for="item in menulist"
  :key="item.id"
>

这样,所有的一级菜单已经渲染出来了。

根据数据结构分析,二级菜单循环所有一级菜单的children属性。

<el-menu-item :index="subItem.id + '' " v-for="subItem in item.children" :key="subItem.id">

<span>{{subItem.authName}}</span>

在这里插入图片描述

22、主页:修饰选项字体、添加图标

因为每个一级菜单都是通过for循环自动生成的,如何在自动生成期间修改字体图标?如何把这些字体图标按照顺序添加给一级菜单?
可以先定义一个字体图标对象:

data() {
iconsObj:{
          '125':'iconfont icon-user',
          '103':'iconfont icon-tijikongjian',
          '101':'iconfont icon-shangpin',
          '102':'iconfont icon-danju',
          '145':'iconfont icon-baobiao',
         }
      }

每循环一次会生成一个一级菜单,给一级菜单的图标动态绑定:

<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>

23、主页:每次只打开一个菜单项并解决边框问题

element-UI中的导航栏menu有这样一个属性:

unique-opened 是否只保持一个子菜单的展开 类型是布尔值,默认是false

把这个属性添加到menu上:

<el-menu
:unique-opened = "true"
>
// 也可以这样写:
<el-menu
unique-opened
>

在这里插入图片描述

.el-aside {
  .el-menu {
      border-right: none;
  }
}

24、主页:实现侧边栏的折叠与展开

1、先加样式,把折叠按钮显示出来。

.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

2、绑定单击事件,到methods里定义,给menu加collapse折叠属性。

<el-aside>
    <div class="toggle-button" @click="toggleCollapse">|||</div>
</el-aside>

<el-menu
:collapse="isCollapse"
:collapse-transition="false" 
>
</el-menu>

3、点击按钮的时候,切换collapse的值truefalse,在data( )中定义boolean值。

data() { 
//   是否折叠
isCollapse: false;
       }
methods: {
//   点击按钮,切换菜单的折叠与展开
 toggleCollapse() {
 this.isCollapse = !this.isCollapse;
 }
      		      }

4、侧边栏的高度随着isCollapse的高度而变化,如果它的值为true,说明被折叠起来了,此时宽度是小的,为64px(字体图标折叠后大小为64px)。如果值为false,说明没有被折叠。

<!-- 侧边栏区域 -->
     <el-aside :width="isCollapse ? '64px' : '200px' "> </el-aside>

25、主页:实现路由的重定向效果

要想在在home页面的main区域,显示welcome组件。

先定义welcome组件,在main的区域中放一个路由的占位符

<el-main>
   <!-- 路由占位符 -->
   <router-view></router-view>
</el-main>

再把welcome路由设置为home的子路由规则,这样就能在home页面中嵌套显示了一个welcome的字组件(定义完welcome组件后记得导入组件)

const routes = [
  {
    path: '/home', component: Home,
    redirect:'/welcome',
    children: [{
      path: '/welcome', component: Welcome
    }]
  }
]

在这里插入图片描述

26、主页:实现侧边栏路由链接的改造

只需把每个二级菜单改成路由链接,加router属性:

<el-menu
    :router="true"
        >
</el-menu>

<!-- 二级菜单 -->
  <el-menu-item
     :index=" '/' + subItem.path"
   >
  </el-menu-item>

在这里插入图片描述

通过index属性帮助跳转地址,这里我们不用id做跳转地址,用path属性做唯一的跳转路径。在控制台里检查出path前没有以“/”开头,于是我们自己加上。

27、用户列表:通过路由的形式展示用户列表组件

点击用户列表,在右侧主体区域展示用户列表对应的组件。该页面头部是面包屑导航,下面是一个卡片视图。

首先创建“用户列表”链接对应的组件页面,接下来通过路由的形式在右侧主体区展示出“用户列表”组件。先导入,再定义。
需要明白的是,用户列表组件是嵌套显示在home组件里的,所以是home里包含了一个子路由叫做用户列表。

import Users from '../components/user/Users.vue'

{
  path: '/home', component: Home,
  redirect: '/welcome',
  children: [
    { path: '/welcome', component: Welcome },
    { path: '/users', component: Users }
  ]
}

在这里插入图片描述

28、用户列表:在sessionStorage中保存左侧菜单的激活状态

menudefault-active属性为当前激活菜单的index,值为string

如果想让菜单中的某一项被高亮,就把这一项对应的index值赋值为整个menu菜单的属性default-active就行了。

<el-menu :default-active="users"></el-menu>

在每次点击链接的时候,应该把对应的地址先保存到sessionStorage中,这样我们就已经先把需要激活的链接保存起来了。当我们刷新页面,可以从sessionStorage中把值取出来动态赋值给menu中的default-active属性。

<!-- 二级菜单 -->
<el-menu-item @click="saveNavState('/' + subItem.path)">

再定义这个函数:

saveNavState(activePath) {        
  // 把值保存到sessionStorage中
 window.sessionStorage.setItem("activePath", activePath);
 this.activePath = activePath;
}

这时候点击用户列表多了一个key,再把这个值重新取出来:
在这里插入图片描述
data里先定义一个数据,来保存激活的链接,默认是空地址

// 被激活的链接地址
activePath: "";

把这个值动态绑定到el-menu上:

<el-menu :default-active="activePath"></el-menu>

接下来activePath赋值,在整个home组件一被创建的时候,就立即从sessionStorage中把值取出来。

created() {
  this.activePath = window.sessionStorage.getItem("activePath");
          }

需要注意的是,在点击不同链接时,也应该给activePath重新赋值,否则再点击新的列表后,点击上一次的列表就不会高亮了。

methods: {
saveNavState(activePath) {
     // 把值保存到sessionStorage中
    window.sessionStorage.setItem("activePath", activePath);
    this.activePath = activePath;
                         }
        }

小结:左侧菜单高亮效果的状态如何保持?

先在点击二级菜单的时候把对应的index值保存到sessionStorage中,当home页面刚被创建的时候立即把值取出来赋值给左侧菜单进行激活。同时,在点击每一个二级菜单的时候,还需要立即给data中的path重新赋值,这样才能实现高亮效果的动态切换。

29、用户列表:绘制用户列表组件的基础布局结构

在这里插入图片描述

element-UI中的面包屑导航组件:

<!-- 面包屑导航区域 -->
 <el-breadcrumb separator-class="el-icon-arrow-right">
   <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>用户管理</el-breadcrumb-item>
   <el-breadcrumb-item>用户列表</el-breadcrumb-item>
 </el-breadcrumb>

element-UI中的卡片组件、input输入框组件、button组件:

<el-card>
 <el-row :gutter="20">
    <el-col :span="8">
        <el-input placeholder="请输入内容">
        <el-button slot="append" icon="el-icon-search"></el-button> 
        </el-input>
    </el-col>
    <el-col :span="4">
        <el-button type="primary">添加用户</el-button>
    </el-col>
  </el-row>
</el-card>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 12px;
}
.el-card{
    /* 默认情况下的样式权重高于自己设置的,所以在后面加 !important*/
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15)!important;
}

Layout布局中的分栏间隔:Row 组件提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。Col组件提供span属性来指定每一列之间的间隔。

30、用户列表:获取用户列表数据

data代表组件当前的私有数据,生命周期函数created,在这里发起当前组件的数据请求,methods用来定义组件当前的事件处理函数。

<script>
export default {
  data() {
    return {
      // 获取用户列表的参数数据
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      userList:[],
      total:0 
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get('users', {
        params: this.queryInfo
      });
      if ((res.meta.status !== 200)) {
        return this.$message.error("获取用户列表失败!");
      }
      this.userlist = res.data.users;
      this.total = res.data.total
      console.log(res);
    },
  },
};
</script>

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐