黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品列表）

商品列表

目录

商品列表

一.创建一个子分支

二.创建组件

三.绘制商品列表的页面基本结构

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

 效果：

 最后是操作，使用作用域插槽的形式接收这一行的数据

 效果：

 优化每一列的宽度

希望商品名称自适应，其他列强制性给个宽度

效果：

 

 （5）创建一个全局的时间过滤器

在main.js中注册一个全局的过滤器

dateFormat——过滤器的名字

originVal——需要处理的时间数据

getFullYear()——获取完整的年份

getMonth()——获取月份，从0开始的,所以要加1，

padStart()——不够多少位，用什么来填充

getDate()——获取当前日期

getHours()——获取当前的时

getMinutes()——获取当前的分

getSeconds()——获取当前的秒

 在创建时间那一列使用作用域插槽的形式，调用过滤器渲染时间，

 效果：

 （6）分页区

添加分页