今天繼續是對後臺管理部分的一個操作，但是快要結束了，今天結束，明天會進入一個從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

所以針對剛纔那種情況樣式穿透也可以實現