当前位置: 首页 > Web前端 > vue.js

Vue3开发拒绝cv,赶紧用crud

时间:2023-04-01 01:39:31 vue.js

寮€鍙戝拰绠$悊鍚庡彴鍩烘湰涓婃槸浼佷笟鐨勬棩甯搁渶姹傘€傚熀鏈笂锛屾瘡涓墠绔」鐩兘蹇呴』鏈変竴涓悗绔」鐩€傝櫧鐒惰繖鏄繀闇€鍝侊紝浣嗘瘡涓汉浼间箮閮藉緢鍏冲績瀹冦€傛瘯绔燂紝瀹冧粎渚涚鐞嗗憳浣跨敤銆備粖澶╂垜浠潵鑱婅亰鈥滃鍒犳敼鏌モ€濈粍浠讹細crud-vue銆俢rud-vue鍙互閫氳繃绠€鍗曠殑json閰嶇疆瀹炵幇瀹屾暣鐨勨€滃鍒犳敼鏌モ€濄€傛敞锛歝rud-vue鏄熀浜巃nt鐨?design-vue锛屾墍浠ュ湪杩涗竴姝ュ紑鍙戜腑鍙互鐩存帴浣跨敤Ant缁勪欢瀹夎yarnaddcrud-vue浣跨敤涓嬮潰鏄竴涓畝鍗曠殑琛ㄥ崟锛屽彧闇€瑕侀厤缃甤olumns鍜宒one瀛楁鍗冲彲銆俢olumns鏄痶able缁勪欢涓殑閰嶇疆鈥渁nt鈥濈粍浠跺簱锛岀敤浜庨厤缃甤olumns.done鏄€渃rud-vue鈥濆畾涔夌殑瀛楁锛寁alue鏄竴涓嚱鏁帮紝鐢ㄤ簬鏍煎紡鍖栨帴鍙h繑鍥炵殑鏁版嵁锛屽嚱鏁拌繑鍥瀧total:10,list:[{xx:1}]}骞舵樉绀烘暟鎹〃銆?scriptsetuplang="ts">importcrud,{defineR}from'crud-vue';constprimaryKey='id';constr=defineR({columns:[{title:'name',dataIndex:'name',},{title:'operation',key:'operation',width:250,},],asyncdone(){const{data}=awaithttp('/缃椾箰');杩斿洖{鍒楄〃锛歞ata.list锛屾€昏锛歞ata.total}锛泒,});API閰嶇疆鈥渃rud-鈥濈殑鈥渃/u/r鈥漹ue"component/d"4涓瓧娈靛疄鐜?澧炲垹鏀规煡"锛岄渶瑕乸rimaryKey(涓婚敭)锛宎nt涓殑a-table闇€瑕侊紝鍙渶鍦ㄦ暟鎹腑閫夋嫨鍙互"鎸囩ず"鐨勫瓧娈靛敮涓€鏍囪瘑鈥?r(read)鏄繀椤荤殑锛屼富瑕佹槸閰嶇疆鈥滆〃鈥濆拰鈥滄暟鎹€濓紝杩欓噷鐨勮〃鍏跺疄灏辨槸馃悳ant鐨勮〃缁勪欢锛屼娇鐢╠efineR鍑芥暟瀹氫箟.constr=defineR({//鍒楅厤缃甤olumns:[{title:'name',dataIndex:'name'}],//杩囨护鏉′欢閰嶇疆conditionItems:[{name:'name',is:'a-input'}],//鍒楄〃鎺ュ彛鏁版嵁澶勭悊asyncdone(){const{data}=awaithttp('/user');return{list:data.xxList,total:data.xxTotal};},});瑙佲€渞鈥濈殑瀹屾暣鏂囨。c(new)optional锛岀敤浜庢瀯閫犱竴涓€渘ew鈥濆舰寮忥紝鐢╠efineC鍑芥暟瀹氫箟銆俢onstc=defineC({asyncbefore(){awaitPromise.all([getRoleOptions(),getDepartmentOptions(),getPositionOptions()]);},asyncdone(formData){const{status,data}=awaithttp.post('/user',formData);return[200===status,data.msg];},formProps:{labelCol:{span:2}},items:()=>[{鏄?'a-input',name:'userName',label:'account',rules:[{required:true,message:'required'}]},{is:'a-input',name:'realName',鏍囩锛?name'},鏌ョ湅"c"鐨勫畬鏁存枃妗(edit)鍙€夛紝鐢ㄤ簬鏋勯€?edit"琛ㄥ崟锛岀敤defineU鍑芥暟瀹氫箟銆傚熀鏈拰"c"鐨勯厤缃槸涓€鏍风殑銆傛煡鐪嬪畬鏁存枃妗?u"d(delete)鍙€夛紝鐢ㄤ簬閰嶇疆鈥滃垹闄ゆ搷浣溾€濓紝鐢眃efineD鍑芥暟瀹氫箟锛宒鐩墠鍙湁涓€涓睘鎬one:done涓哄繀濉」锛宒one涓哄嚱鏁帮紝鐐瑰嚮鈥滃垹闄も€濇寜閽悗瑙﹀彂锛岃姹傚垹闄ゆ帴鍙g殑閫昏緫闇€瑕佸啓鍦ㄥ嚱鏁颁腑銆俢onstd=defineD({asyncdone(idList){//鍒ゆ柇鏄惁鎵归噺鍒犻櫎idList鐨勯暱搴?/鎵归噺鍒犻櫎if(1