商品列表
目录
商品列表
一.创建一个子分支
二.创建组件
三.绘制商品列表的页面基本结构
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模板网！
