vue+elementUI项目中拼接url字符串
在elementUI 中难免会使用table组件完成显示表格数据的功能，如下例子：将后台返回的数据的一个参数再次传给后台接口链接打印excel表格。绛旓細閾炬帴锛 https://github.com/wdlhao/vue2-element-touzi-admin 椤圭洰鏄 vue2.0 + element-ui + node+mongodb 鏋勫缓鐨 鍚庡彴绠＄悊绯荤粺 锛屾墍鏈夌殑鏁版嵁閮芥槸浠庢湇鍔″櫒瀹炴椂鑾峰彇鐨勭湡瀹炴暟鎹紝鍏锋湁鐪熷疄鐨勬敞鍐屻佺櫥褰曘佹暟鎹樉绀恒佹柊澧炴暟鎹佷慨鏀规暟鎹佸垹闄ゆ暟鎹瓑鍔熻兘銆傚墠绔 锛 vue2 + vuex + vue-router + web...
绛旓細Vue 浣跨敤element-ui 椤圭洰涓紩鍏elementui 鍙傝 鍏跺畼缃 瀹夎锛歯pm i element-ui -S 寮曞叆椤圭洰 锛 鍦╩ain.js 涓姞鍏 import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);鐧诲綍妯″潡锛氫娇鐢╡lement form 缁勪欢缂栧啓椤甸潰锛氬湪鐧诲綍鎴愬姛鐨勬柟娉曚腑浣跨敤 ...
绛旓細vue鏁村悎elementui鍚庝緷鐒舵彁绀烘病鎵惧埌渚濊禆瑙ｅ喅鏂规硶鏄細1銆佽繘鍏ュ綋鍓vue椤圭洰鐩綍锛屾煡鐪媝ackage.json鏂囦欢锛屾槸鍚︽湁elementui渚濊禆銆2銆佹病鏈夊垯鍒╃敤npm鏂瑰紡鍦ㄥ綋鍓嶉」鐩矾寰勪笅鎵撳紑cmd锛岃緭鍏pmielement-ui-S杩涜渚濊禆寮曞叆銆3銆佹煡鐪婱ain.js鏂囦欢锛屾槸鍚﹀紩鍏lementui鍗冲彲銆
绛旓細濮撳悕銆佹潈闄愭弿杩扮瓑鍒楋紝鍚敤鐘舵佺敤el-switch灞曠ず銆傝繖鏍风殑璁捐浣垮緱鏁版嵁鐨勫鍒犳敼鏌ユ搷浣滄洿鍔犵洿瑙傦紝鎻愬崌鐢ㄦ埛浣撻獙銆傛讳箣锛element-ui涓Vue琛ㄦ牸鎻愪緵浜嗗己澶х殑娓叉煋鑳藉姏锛岄氳繃鐏垫椿鐨勫姩鎬佺粦瀹氬拰缁勪欢缁勫悎锛屾垜浠彲浠ヨ交鏉惧簲瀵瑰悇绉嶅鏉傜殑琛ㄦ牸灞曠ず闇姹傘傚笇鏈涜繖涓ず渚嬭兘甯姪浣犲湪瀹為檯椤圭洰涓洿濂藉湴杩愮敤element-ui鐨則able缁勪欢銆
绛旓細涓嬮潰鎴戝氨涓哄ぇ瀹跺垎浜竴绡Vue鐨elementUI瀹炵幇鑷畾涔変富棰樻柟娉曪紝鍏锋湁寰堝ソ鐨勫弬鑰冧环鍊硷紝甯屾湜瀵瑰ぇ瀹舵湁鎵甯姪銆備娇鐢vue寮鍙椤圭洰锛岀敤鍒癳lementUI锛屾牴鎹畼缃戠殑鍐欐硶锛屾垜浠彲浠ヨ嚜瀹氫箟涓婚鏉ラ傚簲鎴戜滑鐨勯」鐩姹傦紝涓嬮潰鏉ヤ粙缁嶄竴涓嬩袱绉嶆柟娉曞疄鐜扮殑鍏蜂綋姝ラ锛岋紙鍙互鍙傝冨畼鏂规枃妗ｈ嚜瀹氫箟涓婚瀹樻柟鏂囨。锛夛紝鍏堣椤圭洰涓病鏈変娇鐢╯css缂栧啓锛...
绛旓細Avue宸у鍦板Element UI杩涜浜嗘繁搴﹀皝瑁咃紝鑱氱劍浜庢暟鎹┍鍔ㄨ鍥撅紝鐗瑰埆鏄紭鍖栦簡琛ㄦ牸(table缁勪欢)鍜岃〃鍗(form缁勪欢)鐨勫紑鍙戜綋楠屻傝繖涓鏋舵敞閲嶇粍浠剁殑楂樺鐢ㄦу拰鏄撶淮鎶ゆэ紝涓板瘜鐨勬暟鎹睍绀虹粍浠惰寮鍙戣呭铏庢坊缈硷紝杞绘澗鏋勫缓鍑哄己澶т笖鏄撲簬鎵╁睍鐨椤圭洰銆侲lement UI锛岀敱楗夸簡涔堝墠绔洟闃熷惧姏鎵撻狅紝涓撲负妗岄潰绔璁★紝鏄Vue.js 2...
绛旓細1銆佸畨瑁呭ソVue鍜Element-UI锛屽苟鍦ㄩ」鐩腑寮曞叆銆2銆佸湪Vue椤圭洰鐨勫叆鍙ｆ枃浠朵腑锛屽鍏ue鍜孍lement-UI鐨勫簱鏂囦欢銆3銆佸垱寤轰竴涓棩鍘嗙粍浠讹紝鐢ㄦ潵鏄剧ず鏃ュ巻鐨勫熀鏈竷灞鍜屾棩鏈熶俊鎭4銆佸湪搴旂敤涓婚〉闈腑寮曞叆鏃ュ巻缁勪欢锛屾潵鏄剧ず鏃ュ巻鍜屾棩鏈熼夋嫨鍣ㄣ5銆佹渶鍚庝娇鐢╥mport璇彞寮曞叆涔嬪墠鍒涘缓鐨勬棩鍘嗙粍浠讹紝鍦╟omponents灞炴т腑娉ㄥ唽锛屽嵆鍙湪vue...
绛旓細涓板瘜鐨勭粍浠跺簱锛屽寘鎷〃鏍笺佹寜閽佽〃鍗曠瓑锛岄兘浣撶幇浜嗗叾瀵圭粏鑺傜殑鏋佽嚧杩芥眰銆Element UI锛氫互鍏剁洿瑙傛槗鐢ㄧ殑鐣岄潰鍜岄珮搴︽ā鍧楀寲鐨勭粨鏋勶紝娣卞彈寮鍙戣呭枩鐖便傛棤璁烘槸鍩虹缁勪欢杩樻槸楂樼骇鍔熻兘锛孍lement UI閮借兘鏃犵紳铻嶅叆浣犵殑椤圭洰锛屾彁鍗囧紑鍙戞晥鐜囥傝屽浜庣Щ鍔ㄨ澶囧紑鍙戯紝Vue鍚屾牱鎷ユ湁涓娴佺殑瑙ｅ喅鏂规锛氱Щ鍔ㄤ紭鍏堢殑UI缁勪欢搴撴帹鑽愶細Vant锛氫笓...
绛旓細vue鍜element鐗堟湰瀵瑰簲鍏崇郴锛寁ue鏄竴涓笎杩涘紡妗嗘灦锛Element-Ui鏄粍浠跺簱銆Vue鏄竴濂楃敤浜庢瀯寤虹敤鎴风晫闈㈢殑娓愯繘寮廕avaScript妗嗘灦锛屽紑鍙戣呭彧闇瑕佸叧娉ㄨ鍥惧眰锛屽畠涓嶄粎鏄撲簬涓婃墜锛岃繕渚夸簬涓庣涓夋柟搴撴垨鏃㈡湁椤圭洰鐨勬暣鍚堬紝鏄熀浜嶮VVM锛孧odel-View-ViewModel锛屽嵆瑙嗗浘灞-瑙嗗浘妯″瀷灞-妯″瀷灞傝璁℃濇兂锛屾彁渚汳VVM鏁版嵁鍙屽悜缁戝畾鐨勫簱锛...
绛旓細瀵煎嚭姝ラ濡備笅锛1銆佸湪浣犵殑Vue椤圭洰涓紝闇瑕佸畨瑁呬袱涓簱锛歨tml2canvas鍜宩spdf銆2銆佸湪浣犵殑Vue缁勪欢涓紝闇瑕佸紩鍏ヤ箣鍓嶅畨瑁呯殑html2canvas鍜宩spdf搴擄紝浠ヤ究浣跨敤瀹冧滑鎻愪緵鐨勫姛鑳姐3銆佺‘瀹氫綘鎯宠瀵煎嚭涓篜DF鐨勫叿浣撳唴瀹广傜‘淇濊繖浜涘唴瀹瑰湪娓叉煋鏃跺凡缁忓噯澶囧ソ锛屽苟涓斿彲浠ヨ姝ｇ‘鍦拌闂拰鎿嶄綔銆4銆佸湪ElementUI鐨勭粍浠朵腑锛屾坊鍔犱竴涓...
