ElementUI电商项目实践(三)

199 阅读1分钟

实现首页的路由重定向

只要登录成功,就在main的区域显示欢迎

  1. 新增welcome组件

  1. 添加路由规则

效果:

左侧菜单改造成路由链接

  1. 为menu菜单开启路由模式,加router

  2. 利用index属性改变URL地址

用户列表开发

解决用户小列表

点击链接的时候,把对应的地址保存在sessionStroge中,刷新页面的时候立即取出来

二级菜单绑定单击事件

el-side

绘制用户列表的基本UI结构

面包屑导航

搜索与添加区

效果:

获取用户列表数据

渲染用户列表数据

el-tableel-breadcrumb(面包屑导航)

用到table组件,用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作

prop用来绑定

表格的一些样式、更多请查看文档

为用户列表添加索引列

只要在前面加一列,然后设置type ="index"即可

改造状态列的显示效果

如何把布尔值,按需渲染成开关呢?el-switch

利用作用域插槽

插槽形式自定义列的渲染

el-buttonel-tooltip(按钮上方提示)