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

weixin_34402408發表於2018-10-15

1.Axios中post傳參陣列(java後端接收陣列)

雖然源資料本身就是陣列,但是傳參時會自動變成key:數值或者伺服器無法接收的物件,如下

13341631-d188d303e04a2f73.png
13341631-ffac438e1e70a4e8.png

如果不仔細看,很容易認為這兩種情況沒毛病。。(後端不背鍋,哈哈)

第一種方式轉化為陣列:JSON.stringify

_this.item.push(row.id);//此處_this.item是陣列
const params = new URLSearchParams();
params.append("item",JSON.stringify( _this.item));

第二種方式:此處貼上程式碼(解釋不喜勿噴)

transformRequest: function (data) {
data = qs.stringify({
item: JSON.stringify(_this.item)
});
return data
}
13341631-6f5780b5b3678c61.png

最後真正傳參的格式:

13341631-9dd93d4d5683f348.png

2.Element篇

1.el-table實現單擊行且高亮執行賦值

13341631-3fca15eeff63d85d.png
13341631-521187a733b6abc2.png

css別忘了。。。。

13341631-780877c418d219af.png

2.el-table實現表頭居中且內容居中

13341631-493c7fc5e2fa0406.png

3.el-cascader獲取點選的各級資料

13341631-9f938eb3e9fb906f.png

val==》要接收的空陣列(繫結的資料)opt==》需要遍歷資料來源

配合@change使用:

13341631-4f4826d3be23cc97.png
13341631-d6b48a93f34aa187.png
image

就能實時獲取想要的資料。。。。。至於如何清空,直接將v-model繫結的資料清空即可。。。

4.el-menu動態生成(遞迴)

a.準備樹形資料來源(欄位按個人需求,這裡給出樓主的思路)

13341631-2b87112bc570dbe5.png
13341631-b9a91d393609725b.png

b.實現el-menu裡包含的el-submenu(個人是直接抽取出來,通過props賦值)

13341631-ce649c8e28127143.png

index有個坑,,好像得變成字串,所以加上“”,其實本來就是字串。。。。這裡使用得是遞迴思想生成dom

c:el-menu中使用

13341631-6387b7e0634c8b42.png

準備好第一步得資料來源即可。。。。

5:el-table中使用el-switch(附帶此時事件方法)

13341631-733a4fa8ec210e0f.png
13341631-7db3a6c52a70e42a.png

這裡繫結數字得前面加上 :。。

6.樹形表格,網上找了好多個人封裝的,總是有些bug和其它問題,最後想到了vue版的Easyui,果然還是Easyui處理資料強大。。直接上圖展示

13341631-8624a8e2da909e47.png

此處資料來源也是樹形資料,採用遞迴完成,前面的圖示是通過修改原始碼新增的幾個。。

7.css問題

關於每個.vue中css,之前一直採用scope,,,但是打包之後發現失效了,,最後採用lang=scss方式,需要npm下載。。,最外層樣式就是每個模板的頂級class括起來,這樣也就避免了css全域性汙染啥的。。。。

8.跨域問題解決。。。

13341631-435410d0df19b3b9.png
13341631-59d9fbcd37604884.png

配置之後的請求縮寫。。

配置config中index即可。。。但是產生了打包之後不存在跨域,,,,(難道打包之前把一個個請求的url修改。。。。那會封吧)

解決方案:

1.配置config中dev.env.js檔案

13341631-d0e3b35e59453c84.png

這裡/api就是開發環境剛剛代理跨域的地址

2.配置config中prod.env.js檔案

13341631-170bb631e4671f90.png

這裡配置一個相對路徑,就能自由切換各種環境。。。。

3.設定請求時的路徑,這裡使用axios

13341631-41b181bece3b6e94.png

這裡沒封裝,簡單的寫一下。。。。主要第一行和第四行

此時請求的寫法:

13341631-1cdf4887b3e33e00.png

api沒了,,此時就配好了開發時跨域請求和打包之後的不跨域,,,webpack打包時會自動切換。。。

暫時就這麼多,好多碰到的問題暫時沒想起來。。。。。。

相關文章