今天把平臺(tái)屬性的管理基本完成了，后臺(tái)管理做到現(xiàn)在基本也開始熟悉，確實(shí)就是對(duì)ElementUI的一個(gè)熟練程度。
一.平臺(tái)屬性管理
1.動(dòng)態(tài)展示數(shù)據(jù)
先把接口弄好，應(yīng)該在第三級(jí)標(biāo)題選擇后進(jìn)行發(fā)請(qǐng)求
靜態(tài)頁面搭建
渲染數(shù)據(jù)
屬性值列表，用到一個(gè)新組件tag，并且這里有多個(gè)屬性值，所以要遍歷，既然要在里面加標(biāo)簽?zāi)蔷鸵胹lot，最后添加兩個(gè)圖標(biāo)
2.添加與修改屬性（靜態(tài)）
點(diǎn)擊添加修改應(yīng)該將下面的表格組件隱藏出來一個(gè)新的組件
如果沒有選擇到三級(jí)分類的時(shí)候，添加屬性按鈕應(yīng)該不可點(diǎn)
新的頁面布局
點(diǎn)擊取消應(yīng)該回到列表展示界面
3.收集平臺(tái)屬性
首先我們的接口需要的數(shù)據(jù)，這里要注意我們categoryId是收集categoty3的id，但是這里不能用this.category3Id因?yàn)閐ata里面數(shù)據(jù)聲明賦值是亂序的，所以會(huì)出現(xiàn)undefined
先收集屬性名
在收集屬性值
table數(shù)據(jù)指向子級(jí)list，屬性值應(yīng)該為一個(gè)input框收集內(nèi)容
默認(rèn)進(jìn)來應(yīng)該為空只有當(dāng)點(diǎn)擊添加才會(huì)出現(xiàn)，那么應(yīng)該給子級(jí)list里面的長度為0，因?yàn)閠able綁定的這個(gè)數(shù)據(jù)，當(dāng)我們點(diǎn)擊新增再去push
注意id應(yīng)該為undefined，因?yàn)槲覀冎皇钦嘉?，添加過后給到后端，他才會(huì)賦值你的id
當(dāng)我們屬性名沒有內(nèi)容時(shí)，新增屬性值按鈕應(yīng)該為disabled
4.返回按鈕數(shù)據(jù)回顯問題
當(dāng)點(diǎn)擊取消，再點(diǎn)擊添加屬性，我們剛才編輯的內(nèi)容還在
就是添加屬性進(jìn)來應(yīng)該清空一下內(nèi)容
并且順便還可以把3Id在這里收集了
5.修改屬性操作（面試重點(diǎn)深淺拷貝復(fù)習(xí)）
點(diǎn)擊修改按鈕，把傳進(jìn)來的row參數(shù)直接賦值給
但是這里會(huì)有問題，當(dāng)我們修改了內(nèi)容不點(diǎn)保存點(diǎn)擊取消，會(huì)發(fā)現(xiàn)新的內(nèi)容會(huì)保存下來，其原理跟前面指向問題那里一樣，因?yàn)閞ow是服務(wù)器返回來的數(shù)據(jù)，我們的table也基于這個(gè)數(shù)據(jù)在渲染，你現(xiàn)在點(diǎn)擊修改將baseAttrInfo賦值給了row，相當(dāng)于table渲染的數(shù)據(jù)和baseAttrInfo都指向了同一個(gè)數(shù)組，所以在內(nèi)存里面要修改都會(huì)被修改
先回顧一下深淺拷貝，這兩個(gè)必須達(dá)到手寫出來的程度
淺拷貝，也可以利用es6語法object.assign方法來實(shí)現(xiàn)，前面參數(shù)老對(duì)象后面參數(shù)新對(duì)象，還可以使用之前用的方法{…obj}擴(kuò)展運(yùn)算符出來，又賦值一個(gè)新對(duì)象
一定要注意淺拷貝只拷貝一層，深層次的內(nèi)容只拷貝引用，意思就是新對(duì)象可以得到這個(gè)內(nèi)容，但是由于只是引用所以新對(duì)象修改，老對(duì)象深層次的內(nèi)容也會(huì)被修改
然后是深拷貝，他就是可以拷貝多層，而且深層次的內(nèi)容開辟新的空間，各管各的，要實(shí)現(xiàn)深拷貝用到一個(gè)核心內(nèi)容就是遞歸
所以回到項(xiàng)目上面來，我們這里這個(gè)數(shù)據(jù)能像之前那樣直接使用淺拷貝嗎
很明顯涉及到深層次數(shù)據(jù)了,所以這里直接用深拷貝，用到lodash的深拷貝
6.查看模式與修改模式切換
當(dāng)點(diǎn)擊修改進(jìn)來attrId應(yīng)該為當(dāng)前這個(gè)屬性的id
所以我新增的這個(gè)屬性也應(yīng)該有id，這樣當(dāng)我們的如果是修改進(jìn)入就是這個(gè)id，如果是直接新增一個(gè)新的屬性，那么沒有這個(gè)id值就為undefined
什么叫做查看模式與修改模式
當(dāng)我點(diǎn)擊添加應(yīng)該有一個(gè)input框當(dāng)我失去焦點(diǎn)應(yīng)該轉(zhuǎn)為一個(gè)span來呈現(xiàn)，兩者勢不兩立應(yīng)該用v-if和v-else來展示
注意這里并不能統(tǒng)一在data定義一個(gè)flag來作為切換的依據(jù)，因?yàn)槿绻加盟敲串?dāng)我有多條數(shù)據(jù)的時(shí)候，我切換就變成了全部一起切換了
這里有個(gè)技巧就是，當(dāng)我在push一條新數(shù)據(jù)，點(diǎn)擊添加新對(duì)象的時(shí)候，給每一條數(shù)據(jù)單獨(dú)添加一個(gè)flag
失去焦點(diǎn)、以及回車都會(huì)切換到查看模式，注意這里是組件標(biāo)簽所以系統(tǒng)事件也是自定義事件要先加native再加enter才行
然后是查看模式雙擊事件切換到修改模式
注意事項(xiàng)：
- 一個(gè)是如果我們輸入的空白值不允許保存切換
- 還有一個(gè)問題就是，如果是重復(fù)的值也不能切換，這里用some方法來做，some和every的區(qū)別回顧一下，還有這里有個(gè)問題，我們對(duì)當(dāng)前子級(jí)list做一個(gè)遍歷，而且邏輯是寫在blur里面的，所以這個(gè)時(shí)候我們新的數(shù)據(jù)，也就是row已經(jīng)生成，那么我們some就會(huì)遍歷到他，那么你在里面判斷的時(shí)候應(yīng)該排除掉他，不然的話每一個(gè)item進(jìn)來永遠(yuǎn)都有一個(gè)相等的
7.修改按鈕的查看與編輯切換
當(dāng)我們點(diǎn)擊修改按鈕進(jìn)入屬性操作，會(huì)發(fā)現(xiàn)無法進(jìn)行查看與編輯的切換，也很正常，剛才添加flag完全是在添加屬性這個(gè)按鈕里面做的
所以我們就需要給修改按鈕的回調(diào)做一些操作
如果像這樣做確實(shí)能添加上flag但并不會(huì)觸發(fā)視圖更新，因?yàn)槲覀兦懊娴膄lag是通過push添加進(jìn)行的，能夠被vue檢測到，而且還是響應(yīng)式數(shù)據(jù)，而我們這里直接加入進(jìn)來，一個(gè)普通的數(shù)據(jù)并不會(huì)被vue檢測到改變，所以也就不會(huì)去重新解析模板，這里的做飯就是用$set添加響應(yīng)數(shù)據(jù)即可
8.表單元素自動(dòng)聚焦
核心思想是給每個(gè)input打ref，而且值為$index，當(dāng)我們從span切換到編輯的這個(gè)事件中，可以傳入這個(gè)時(shí)候index，也就是當(dāng)前的input，利用nextTick就可以讓切換過后的input馬上聚焦
因?yàn)閕ndex是動(dòng)態(tài)參數(shù)所以這里對(duì)象只能采用【】這種形式
然后就是我們每一次點(diǎn)擊新增屬性也應(yīng)該聚焦，而且是聚焦最后一個(gè)
9.刪除屬性值
用到一個(gè)新組件氣泡框Popconfirm
注意一下，這里模板用的elementUI是2.13.2版本，官網(wǎng)是最新版本，所以對(duì)于氣泡框的事件名有出入
注意splice方法
10.保存操作
平臺(tái)屬性最后一步就是編輯完成保存操作，在這一步準(zhǔn)備發(fā)請(qǐng)求了，但是在發(fā)請(qǐng)求之前要先整理一下參數(shù)
首先我們的參數(shù)要確保不能有空的內(nèi)容
另外就是我們的請(qǐng)求的參數(shù)數(shù)據(jù)是不需要flag還要把他刪除了，直接delete可以刪除對(duì)象的屬性
然后就可以發(fā)請(qǐng)求
Vue
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。