Vue與Element走過的坑。。。。帶上Axios
1.Axios中post傳參陣列(java後端接收陣列)
雖然源資料本身就是陣列,但是傳參時會自動變成key:數值或者伺服器無法接收的物件,如下
![13341631-d188d303e04a2f73.png](https://i.iter01.com/images/4c19b84edc22eb4d0fb78742978c42031cfdedba3ea16dfb4f6f7052daf8a7f2.png)
![13341631-ffac438e1e70a4e8.png](https://i.iter01.com/images/f11cfcb47fbb011363c28c4338db26978842357c73dd0413ea06756df68b760b.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](https://i.iter01.com/images/81c7ae52590940df31fbeab8fbd4e7a3a8098761a8d70493cfddf86c2ea4d1c2.png)
最後真正傳參的格式:
![13341631-9dd93d4d5683f348.png](https://i.iter01.com/images/8e155a687fdb3a2ef593ad5409c8de4e124a1b7ed7efa75b47dee006dcf26dd1.png)
2.Element篇
1.el-table實現單擊行且高亮執行賦值
![13341631-3fca15eeff63d85d.png](https://i.iter01.com/images/23ca09db6c2b934975f03b49da8da2e605deccb4fa8854f5fdbdaf36d4cfaacb.png)
![13341631-521187a733b6abc2.png](https://i.iter01.com/images/13e2a479383d423bdd116dd74c19badc2082bf04912df25253dcd0efc6541db9.png)
css別忘了。。。。
![13341631-780877c418d219af.png](https://i.iter01.com/images/8c1cc52eeeeaaf97fc35f8353c6c33003fb668219bab77dae43a7b128b2c3c7c.png)
2.el-table實現表頭居中且內容居中
![13341631-493c7fc5e2fa0406.png](https://i.iter01.com/images/d47c6147467b36e152d679b86ad8724dfbd826ce531cbea33a61e427cc6ef079.png)
3.el-cascader獲取點選的各級資料
![13341631-9f938eb3e9fb906f.png](https://i.iter01.com/images/5c4a40b4ca083f39d34557aec84499a0dc7dd0ef3edf33de2b38cc4b0d183d5a.png)
val==》要接收的空陣列(繫結的資料)opt==》需要遍歷資料來源
配合@change使用:
![13341631-4f4826d3be23cc97.png](https://i.iter01.com/images/e61a1596e5b7005863966d14bedbe8a529a0fc89519d26542a8d6a90ea5fb98a.png)
![13341631-d6b48a93f34aa187.png](https://i.iter01.com/images/a8ec5bd411114065fdb8d00a8af68fe936a0b5fb21432254f5fdde559cc936fe.png)
就能實時獲取想要的資料。。。。。至於如何清空,直接將v-model繫結的資料清空即可。。。
4.el-menu動態生成(遞迴)
a.準備樹形資料來源(欄位按個人需求,這裡給出樓主的思路)
![13341631-2b87112bc570dbe5.png](https://i.iter01.com/images/687a79e0079b70d3364711041d8fcb07206577565d084e8630265056557c0fe7.png)
![13341631-b9a91d393609725b.png](https://i.iter01.com/images/1dd6df23bd2f61ddc0dffb1ab4161f19f2538f2b7031edea118dc689619dc806.png)
b.實現el-menu裡包含的el-submenu(個人是直接抽取出來,通過props賦值)
![13341631-ce649c8e28127143.png](https://i.iter01.com/images/ae69bf4ebd1c1629131f7ffdbb2d18ad7a21b778ec1af1df4f413c8b5b128825.png)
index有個坑,,好像得變成字串,所以加上“”,其實本來就是字串。。。。這裡使用得是遞迴思想生成dom
c:el-menu中使用
![13341631-6387b7e0634c8b42.png](https://i.iter01.com/images/bc25572289a447e5ecbef96063d5fa272cb386865eafc282c826ac0f69fedf33.png)
準備好第一步得資料來源即可。。。。
5:el-table中使用el-switch(附帶此時事件方法)
![13341631-733a4fa8ec210e0f.png](https://i.iter01.com/images/13e34852e9d011cbe978c2090953bb9755329193704f55bd6269077fb9dba68b.png)
![13341631-7db3a6c52a70e42a.png](https://i.iter01.com/images/369b292056d87850dd50e5fab47fc0c99cb6124104d177eea9ce43ac83d988de.png)
這裡繫結數字得前面加上 :。。
6.樹形表格,網上找了好多個人封裝的,總是有些bug和其它問題,最後想到了vue版的Easyui,果然還是Easyui處理資料強大。。直接上圖展示
![13341631-8624a8e2da909e47.png](https://i.iter01.com/images/d67e4872e7dcb6d901c01fc33989fa1ae894bdaaceb718e59991313d5e443b48.png)
此處資料來源也是樹形資料,採用遞迴完成,前面的圖示是通過修改原始碼新增的幾個。。
7.css問題
關於每個.vue中css,之前一直採用scope,,,但是打包之後發現失效了,,最後採用lang=scss方式,需要npm下載。。,最外層樣式就是每個模板的頂級class括起來,這樣也就避免了css全域性汙染啥的。。。。
8.跨域問題解決。。。
![13341631-435410d0df19b3b9.png](https://i.iter01.com/images/be07bc46c20154258d302ed328e1cbcdb459eb16176465493f965c59243b6060.png)
![13341631-59d9fbcd37604884.png](https://i.iter01.com/images/925d2a136bea1dbde7af98fd0749d597903a4a89b729a8946341143bb546e45a.png)
配置之後的請求縮寫。。
配置config中index即可。。。但是產生了打包之後不存在跨域,,,,(難道打包之前把一個個請求的url修改。。。。那會封吧)
解決方案:
1.配置config中dev.env.js檔案
![13341631-d0e3b35e59453c84.png](https://i.iter01.com/images/5d00d42541d4a88d56b03c3372e82ad002c80d3e74e7fd1c66090f7e92a6514a.png)
這裡/api就是開發環境剛剛代理跨域的地址
2.配置config中prod.env.js檔案
![13341631-170bb631e4671f90.png](https://i.iter01.com/images/fa8a9f1d85531744ffe901c4e9b4faa7c393237bab557c6ce108fdc8f8c6f932.png)
這裡配置一個相對路徑,就能自由切換各種環境。。。。
3.設定請求時的路徑,這裡使用axios
![13341631-41b181bece3b6e94.png](https://i.iter01.com/images/17c18992d5e1d67b6f2e54ee330b82aabac417c83a08559dcf7a560af7303fb0.png)
這裡沒封裝,簡單的寫一下。。。。主要第一行和第四行
此時請求的寫法:
![13341631-1cdf4887b3e33e00.png](https://i.iter01.com/images/a1cb9776f58ac3a191e38e572b087bbe227e6466893b1fdc02ab08818e371838.png)
api沒了,,此時就配好了開發時跨域請求和打包之後的不跨域,,,webpack打包時會自動切換。。。
暫時就這麼多,好多碰到的問題暫時沒想起來。。。。。。
相關文章
- vue專案中踩過的element的坑Vue
- vue-element-admin 使用過程中踩坑Vue
- vue-element-admin 入坑記(一)vue-element-admin 中文Vue
- 使用vue2+Axios遇到的一些坑VueiOS
- vue中axios非同步呼叫介面的坑VueiOS非同步
- 那些年走過下劃線的坑
- vue vue-element-admin專案踩坑小結Vue
- vue中axios的使用與封裝VueiOS封裝
- 那些年走過ArrayList迴圈remove的坑REM
- vue 本地除錯跨域---帶cookies(axios)Vue除錯跨域CookieiOS
- vue-cli + es6 + axios專案踩坑VueiOS
- 封裝Vue Element的upload上傳元件封裝Vue元件
- Laravel 5.8 集合 vue-element-admin 踩坑記LaravelVue
- 親自踩過的vue的坑Vue
- 用Vue、element-ui、axios實現省市區三級聯動VueUIiOS
- vue axiosVueiOS
- 校招那些坑,是我走過最長的路
- axios自帶的上傳進度回撥函式iOS函式
- Vue + Element 自定義上傳封面元件Vue元件
- axios的post請求爬坑iOS
- FastAPI專案實戰:SayHello(FastAPI + vue.js + axios + element ui 翻自Flask版的SayHello)ASTAPIVue.jsiOSUIFlask
- element-ui+Vue實現的圖片上傳UIVue
- vue 使用axiosVueiOS
- Vue Axios 的封裝使用VueiOS封裝
- Vue.js+Element-UI走馬燈圖片自適應實踐Vue.jsUI
- 學習Typescript 並使用單例模式 組合Vue + Element-ui 封裝 AxiosTypeScript單例模式VueUI封裝iOS
- element-ui坑點UI
- Vue3+AxiosVueiOS
- vue的axios元件如何與PHP後端交換資料VueiOS元件PHP後端
- 詳解vue中Axios的封裝與API介面的管理VueiOS封裝API
- axios在vue中的實踐iOSVue
- vue中使用axios的封裝VueiOS封裝
- vue_resource和axiosVueiOS
- vue axios全攻略VueiOS
- Vue2.0配置mint-ui踩過的那些坑VueUI
- vue中axios請求的封裝VueiOS封裝
- vue的Array坑Vue
- 基於vue-element UI 後臺管理平臺 踩坑記錄( 一 )VueUI