今天繼續是對後臺管理部分的一個操作，但是快要結束了，今天結束，明天會進入一個從Vue以來，另外一個名聲顯著的東西了，一隻耳聞從未見識，而且十分的炫酷
他就是------資料視覺化Echarts，迫不及待了解了
11.銷售屬性新增
當我們點選新增就，應該把新增的放到table裡面來，table裡面每一行資料是一個物件
然後就可以開始整理資料，我們select收集的值不應該只是id
收集到了資料，直接在button點選事件，整理引數，給到我們的data對應的資料
12.銷售屬性值展示與收集
這裡主要是button和input的一個切換
給新增來一個點選事件，此時的row就為當前這一行的資料，我們知道每一行必須有自己獨有的控制切換的變數，我們前面也說過先把控制切換的變數還有收集input的變數先放在這裡，並沒有去做什麼時候新增這兩個變數，現在就是時候了，當點選新增的時候就可以把兩個變數新增進來，但是要注意我們需要點選就重新解析頁面出來input所以要做響應式資料，同時需要把上面表單收集的值也做好，因為馬上切換為input就要開始收集了
然後就是當我們失去焦點，需要將值呈現出來，這個就要看到我們的tag是遍歷的什麼了
所以失去焦點後要總結一下值放到這個子列表裡面
然後就是兩個注意事項，一個是不能存空值，一個是不能存重複的值
13.刪除銷售屬性與屬性值
拿到索引，直接根據splice方法刪除即可，注意tag元件點選x的事件是close
順便把除了在場景0顯示其他都不能點選的三級聯動也做了
14.spu修改儲存操作
這個頁面涉及到兩個操作的儲存，一個是修改一個是新增，而且他們兩個介面要的資料都差不多就是一個id的區
然後在我們儲存點選事件準備發請求，先要整理引數，所有的引數都能夠收集到，只是照片牆這裡需要整合進資料，我們新增的資料沒有imgname和imgurl，其次我們發過去的資料不需要name和url
請求成功應該通知父元件回到table並重新整理頁面
15.spu新增儲存
當我們點選新增spu，應該發起兩個請求，獲取品牌和銷售屬性的下拉框選擇，新增按鈕在父元件，所以通過ref通知子元件發請求
然後觀察得知都可以手機，就是category3id收集不到
然後就是幾個bug，當出現內容過多我在第三頁新增儲存之後不應該在第三頁要回到第一頁
取消按鈕也要改
二.刪除spu
準備介面，用到元件pop
同時判斷當前位置應該停留在那
三.新增sku
1.靜態元件
首先點選新增sku會切換場景2
然後完成sku的靜態，主要就是注意一下table前面如果不是序號為選擇框，type為selection
2.獲取skuform資料
當我們點選新增sku，需要發起三個請求，一樣的套路通過父元件ref來呼叫
3.sku收集與展示
總共應該分為三類資料，第一類應該是父元件傳過來的
第二類應該是通過v-model可以收集到的資料
主要就是注意一下 input新增 type為number可以限制只能輸入數字
第三類資料就是一些需要計算操作的資料
先把平臺屬性完成，遍歷
這裡的難點主要在於怎麼來收集資料，看介面文件可知，需要這些資料
但是我們這裡其實只需要拿到這兩個就可以了
attrId表示你選擇了那一個select，valueId表示你選擇了那一個值，有這兩個就可以了
第二個難點就是我們資料要放在哪裡，因為你要知道我們這裡收集的可能不只一個值，不只一個select，所以最好的方法其實是存放在這個select的物件裡面
銷售屬性同理
接下來是對sku圖片的一個收集與展示
然後這個圖片怎麼來收集的問題，核取方塊表格有一個事件，是當選擇按鈕發生變化時觸發，而且還會有引數，引數就為當前勾選的這些圖片的一行的資料
先不要放進skuInfo介面引數裡面，因為還不完整
檢視我們介面資料可知有一個isDefault的引數，它是表示當前這個圖片是否是預設值，但是我們從伺服器拿回來資料的時候就沒有這個引數，所以一開始就要新增上
然後做預設button
4.sku儲存
在做這一步之前，肯定是要先整理引數，首先是平臺屬性和銷售屬性的引數整理，應該點選儲存後，就對attrData來一個遍歷，然後依次每一條資料字串轉為陣列，push到一個物件裡面，最後把這個物件給到skuinfo的引數
但是我這裡不這樣做，用另一個方法，因為這裡你會重複往一個陣列裡面新增內容，所以可以通過迭代來做
銷售屬性同理
整理圖片引數
發起儲存請求，成功返回頁面
5.sku列表展示
完成介面後，這裡使用dialog展示出來，將標題改為動態
然後修改table的結構
6.loading效果
用到elementUI全新的元件loading
直接給table來一個v-loading指令
然後需要在資料data定義loading為true
記得資料回來將其改為false
然後有兩個bug
一個是我們的loading只會執行一次，因為改為false後就永遠是false了，還有一個是會有資料回顯的問題，點了一個sku顯示之後在去點其他的 他一瞬間會顯示下上一條的資料
這些都可以通過dialog的一個回撥來解決，before-close注意它是一個屬性，所以要用v-bind繫結，然後他有一個形參done，必須寫上才能正常關閉，他表示關閉dialog前的回撥
四.Sku
1.資料展示與分頁
首先做好介面，然後完成靜態頁面
發請求獲取table資料
動態展示資料在表格上
然後做分頁器，點選改變還是用的之前的套路
2.上架與下架功能
這是兩個介面，然後點選切換上下架的按鈕，併發起相應的介面請求
3.檢視詳情（多個新元件）
首先點選檢視詳情由一個從右往左出來的內容，用到Drawer 抽屜
同時點開檢視詳情還應該發起請求
然後給我們drawer抽屜整理下佈局，這裡應該用到一個新元件layout，跟bootstrap的柵格系統一樣，但是餓了嗎是分為了24份
要注意要自己去修改樣式，並不是用這裡的元件當成元件標籤去修改，可以去看最終在頁面上呈現的標籤類名等來修改
然後頁面佈局完畢，就可以放入動態資料了，平臺屬性用的是tag標籤
最後是圖片展示這裡，需要一個輪播圖carousel
要修改單獨的指示器
4.深度選擇器
首先回顧一點，我們給css加scoped，是為了讓當前樣式只在這個元件生效，他的方法就是給當前元件所有的標籤都加上一個隨機的屬性，再通過你的選擇器和他的屬性選擇器達到只在這裡生效
但是要注意一點，我們的子元件 根元件也會有這個屬性，所以如果子元件根元件跟父元件設定的選擇器一樣的話那麼根元件是會受影響的，但是隻影響根元件，根元件下面的其他標籤就沒事了
當我有這樣一個子元件，我也想要父元件設定了子元件能夠跟著生效
一種方法就是父元件去掉scoped，但是我就是不能去掉，這個時候就要用到深度選擇器了，也叫樣式穿透在原生css裡面是>>>，less裡面是/deep/，scss裡面是::v-deep
所以針對剛才那種情況樣式穿透也可以實現
