商品列表
目錄
商品列表
一.創(chuàng)建一個子分支
二.創(chuàng)建組件
三.繪制商品列表的頁面基本結(jié)構(gòu)
1.面包屑導(dǎo)航
?2.卡片視圖區(qū)域
四.功能
1.搜索
?2.刪除
?3.添加
五.提交代碼
一.創(chuàng)建一個子分支
git branch——查看當前所在分支
git checkout -b goods_list——創(chuàng)建新的子分支goods_list
git branch——查看當前所在分支
git push -u origin goods_list——將子分支goods_list推送到云端倉庫中
二.創(chuàng)建組件
1.在goods文件夾中創(chuàng)建List.vue組件
2.在router/index.js中導(dǎo)入剛剛創(chuàng)建的組件
3.注冊為Home的子路由
三.繪制商品列表的頁面基本結(jié)構(gòu)
1.面包屑導(dǎo)航
?2.卡片視圖區(qū)域
?（1）帶圖標的輸入框
?
效果：
?（2）添加按鈕
效果：
（3）獲取商品列表數(shù)據(jù)
首先在data中定義一個參數(shù)對象，作為調(diào)用api接口的請求參數(shù)
接著在methods中定義getGoodList函數(shù)，用來獲取商品列表數(shù)據(jù)
?然后在data中定義一個空數(shù)組和total，用來存放獲取到的商品列表數(shù)據(jù)和數(shù)據(jù)總條數(shù)
最后在getGoodsList函數(shù)中將獲取到的數(shù)據(jù)賦值給goodslist數(shù)組和total
?（4）將獲取到的數(shù)據(jù)渲染出來
首先在卡片視圖區(qū)域中添加table表格，data綁定goodslist數(shù)組，加邊框，隔行變色
?接著是顯示索引列
效果：
?其次是商品名稱列，prop屬性指定goods_name屬性
?效果：
?緊接著的是商品價格，prop指定的是good_price
?效果：
?然后是商品重量，prop指定的是goods_weight
再后面是商品創(chuàng)建時間，prop指定的是add_time
?效果：
?最后是操作，使用作用域插槽的形式接收這一行的數(shù)據(jù)
?效果：
?優(yōu)化每一列的寬度
希望商品名稱自適應(yīng)，其他列強制性給個寬度
效果：
?
文章來源：http://www.zghlxwxcb.cn/news/detail-480656.html
??文章來源地址http://www.zghlxwxcb.cn/news/detail-480656.html
到了這里，關(guān)于黑馬程序員課程Vue實戰(zhàn)項目_Element-ui——電商后臺管理系統(tǒng)-商品管理（商品列表）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
