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


1.Axios中post傳參數組(java后端接收數組)

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

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

第一種方式轉化為數組: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
}

 

最后真正傳參的格式:

2.Element篇

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

css別忘了。。。。

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

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

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

配合@change使用:

就能實時獲取想要的數據。。。。。至於如何清空,直接將v-model綁定的數據清空即可。。。

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

a.准備樹形數據源(字段按個人需求,這里給出樓主的思路)

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

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

c:el-menu中使用

准備好第一步得數據源即可。。。。

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

 

這里綁定數字得前面加上  :。。

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

此處數據源也是樹形數據,采用遞歸完成,前面的圖標是通過修改源碼新增的幾個。。

 7.css問題

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

8.跨域問題解決。。。

配置之后的請求縮寫。。

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

解決方案:

1.配置config中dev.env.js文件

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

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

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

 3.設置請求時的路徑,這里使用axios

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

此時請求的寫法:

 

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

 

暫時就這么多,好多碰到的問題暫時沒想起來。。。。。。不喜勿噴(才剛剛接觸一個月的vue)。。

 

2018-10-15 16:00

鬧了一個烏龍。。。上次把頁面定制了一下,引用的是別人封裝的,結果每篇文章都帶有他的簽名。。。。醉了。。已修復。。

歡迎進群學習交流(927465926) Full Stack engineer

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM