Vue與Element走過的坑。。。。帶上Axios

出處：
//www.cnblogs.com/wtzl/p/9791398.html

1.Axios中post傳參數組（java后端接收數組）

雖然源數據本身就是數組，但是傳參時會自動變成key:數值或者服務器無法接收的對象，如下

如果不(bu)仔細看，很容易認為這兩種情況沒毛(mao)病。。（后端不(bu)背鍋，哈哈）

第一種方式(shi)轉化為數(shu)組：JSON.stringify

_this.item.push(row.id);//此處(chu)_this.item是數(shu)組(zu)

const params = new URLSearchParams();

params.append("item",JSON.stringify( _this.item));

第二種方式：此(ci)處貼上代(dai)碼(ma)（解釋不喜勿噴）

transformRequest: function (data) {

data = qs.stringify({

item: JSON.stringify(_this.item)

});

return data

}

最(zui)后真正傳(chuan)參的格式：

2.Element篇

1.el-table實現單擊行且(qie)高(gao)亮執行賦(fu)值

css別忘(wang)了。。。。

2.el-table實現(xian)表(biao)頭(tou)居中且(qie)內容居中

3.el-cascader獲取點擊(ji)的各級數據

val==》要接收的空(kong)數組（綁(bang)定的數據）opt==》需要遍歷數據源

配(pei)合@change使(shi)用：

就能實時獲取想要的數(shu)據(ju)。。。。。至(zhi)于(yu)如何清(qing)空，直接(jie)將v-model綁定的數(shu)據(ju)清(qing)空即可。。。

4.el-menu動態(tai)生成（遞(di)歸）

a.準備樹形數(shu)據(ju)源（字段按個人需求，這里給出樓主的思(si)路）

b.實現(xian)el-menu里包含的(de)el-submenu（個(ge)人(ren)是直接抽(chou)取出來，通過props賦值）

index有(you)個坑，，好像得變成(cheng)字符串，所(suo)以加上“”,其實本(ben)來就是(shi)字符串。。。。這里(li)使(shi)用得是(shi)遞歸(gui)思(si)想生成(cheng)dom

c:el-menu中(zhong)使用

準備(bei)好(hao)第一步得(de)數據源(yuan)即可(ke)。。。。

5：el-table中(zhong)使(shi)用el-switch(附(fu)帶(dai)此時事件方法(fa)）

這里綁定(ding)數字得前面加上 ：。。

6.樹形表(biao)格，網上(shang)找(zhao)了(le)好多個人封裝的，總是(shi)(shi)有些bug和其它(ta)問題，最后(hou)想到了(le)vue版的Easyui，果然還是(shi)(shi)Easyui處(chu)理數(shu)據強大。。直接上(shang)圖(tu)展示

此處數據源也是樹形(xing)數據，采用遞歸完成(cheng)，前面的圖標(biao)是通過修改源碼(ma)新增的幾個。。

7.css問題

關于每(mei)個(ge).vue中css，之前一直采用scope，，，但是打包(bao)之后發現失(shi)效了，，最(zui)后采用lang=scss方(fang)式(shi)，需要npm下載。。，最(zui)外層樣式(shi)就是每(mei)個(ge)模板的頂級class括起來，這樣也就避免了css全(quan)局污染(ran)啥的。。。。

8.跨域問題解(jie)決。。。

配置(zhi)之后的請求縮寫。。

配置config中index即可。。。但是產生了打包(bao)之(zhi)后不存在(zai)跨(kua)域，，，，（難(nan)道打包(bao)之(zhi)前(qian)把一個個請求的url修(xiu)改。。。。那會封吧）

解決方案：

1.配(pei)置config中(zhong)dev.env.js文件(jian)

這(zhe)里/api就是開發環境剛剛代理(li)跨域的地址

2.配置config中prod.env.js文件

這里(li)配置一個(ge)相對路(lu)徑，就能自由切(qie)換各種環境。。。。

3.設置(zhi)請求(qiu)時的路徑(jing)，這里使(shi)用axios

這(zhe)里沒封裝，簡單的寫一(yi)下。。。。主要第一(yi)行和(he)第四(si)行

此時請求的寫法：

api沒了，，此(ci)時(shi)就配(pei)好了開(kai)發時(shi)跨(kua)域請求和打包之后的不跨(kua)域，，，webpack打包時(shi)會自動切(qie)換(huan)。。。

暫時(shi)就這么多(duo)，好多(duo)碰到的問題暫時(shi)沒想起來(lai)。。。。。。