商品列表
目录
商品列表
一.创建一个子分支
二.创建组件
三.绘制商品列表的页面基本结构
1.面包屑导航
2.卡片视图区域
四.功能
1.搜索
2.删除
3.添加
五.提交代码
一.创建一个子分支
git branch——查看当前所在分支
git checkout -b goods_list——创建新的子分支goods_list
git branch——查看当前所在分支
git push -u origin goods_list——将子分支goods_list推送到云端仓库中
二.创建组件
1.在goods文件夹中创建List.vue组件
2.在router/index.js中导入刚刚创建的组件
3.注册为Home的子路由
三.绘制商品列表的页面基本结构
1.面包屑导航
2.卡片视图区域
(1)带图标的输入框
效果:
(2)添加按钮
效果:
(3)获取商品列表数据
首先在data中定义一个参数对象,作为调用api接口的请求参数
接着在methods中定义getGoodList函数,用来获取商品列表数据
然后在data中定义一个空数组和total,用来存放获取到的商品列表数据和数据总条数
最后在getGoodsList函数中将获取到的数据赋值给goodslist数组和total
(4)将获取到的数据渲染出来
首先在卡片视图区域中添加table表格,data绑定goodslist数组,加边框,隔行变色
接着是显示索引列
效果:
其次是商品名称列,prop属性指定goods_name属性
效果:
紧接着的是商品价格,prop指定的是good_price
效果:
然后是商品重量,prop指定的是goods_weight
再后面是商品创建时间,prop指定的是add_time
效果:
最后是操作,使用作用域插槽的形式接收这一行的数据
效果:
优化每一列的宽度
希望商品名称自适应,其他列强制性给个宽度
效果:
文章来源:https://www.toymoban.com/news/detail-480656.html
文章来源地址https://www.toymoban.com/news/detail-480656.html
到了这里,关于黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!