当前位置: 首页 > Web前端 > HTML

通过vNode标注列表字段

时间:2023-03-28 13:54:01 HTML

@import"./index.less";闂濡備綍鏍囨敞鍒楄〃鏁版嵁锛熺被浼煎涓嬸煈囨€濊矾鏁版ā杞崲锛堝鎺ュ彛璇锋眰杩斿洖鐨勬暟鎹繘琛岃繃婊ゆ爣璁帮紝杩斿洖鏂扮殑鏁版嵁锛夋覆鏌撴柊鐨勬暟鎹ā鍨嬪疄鐜?.杩囨护鏁版嵁锛屼娇鐢╦sx鍐欐硶瀵归渶瑕佸鐞嗙殑涓氬姟鏁版嵁杩涜澶勭悊寰呮爣璁版垜灏佽鍦╩ixins涓?/瀛樺偍鍏ㄥ眬mixins锛屽彲浠ユ媶鍒嗘垚妯″潡{return{p_category:[],listdata:[],p_total:0,p_loading:false,}},computed:{//...mapGetters(['productLevel','productLevelInfo']),p_listdata(){const鏁版嵁=杩欎釜.listdata锛沝ata.forEach((item)=>{//...//jsx鏂瑰紡锛屾爣绛緄f(item.status===2||item.status===3){item.status=鍋滄閿€鍞?/span>}else{item.status=item.status}if(item.age<=25){item.age={item.age}}if(item.sex==='Man'){item.sex=}})杩斿洖鏁版嵁锛泒},鏂规硶锛歿asyncgetProductList(params={}){try{this.p_loading=truethis.listdata=[]constres=awaitfetchListData(params)if(res.code===0){const{data=[],鎬昏=0}=res||{}if(Array.isArray(data)){this.listdata=[...data]this.p_total=total}else{this.listdata=[]this.p_total=0}else{this.listdata=[]this.p_total=0this.$message.error(res.message||'鍑洪敊浜?)}this.p_loading=false;}catch(err){this.p_loading=falsethis.listdata=[]this.p_total=0console.log(err);}}}}base.less瀹氫箟鏍囩鏍峰紡.badge_info{color:#4760f0;鑳屾櫙锛?1C84C6锛涘~鍏咃細5px8px锛涢鑹诧細#fff锛沚order-radius:5px;}.badge_default{棰滆壊:#4760f0;鑳屾櫙锛?4760f0锛涘~鍏咃細5px8px锛涢鑹诧細#fff锛沚order-radius:5px;}2.灏佽鍒楄〃娓叉煋缁勪欢@import"./index.less";3.鏂规硶灏佽鍜屾覆鏌搗NodeconstrenderDom={props:{vNode:{type:[Array,String,Object,Number],},},render(h){//jsx-vNode鐩存帴杩斿洖锛屼氦缁欐鏋跺鐞?js璇硶甯︽潵澶氱鍙兘鎬э紝鍒楄〃鏍囨敞鍔熻兘)if(typeofthis.vNode==='object'){returnthis.vNode;}//鏅€氭暟鎹紝鐩存帴鍖呰9涓€灞俤iv锛岀劧鍚庤繑鍥炵粰椤甸潰returnh('div',{class:'ellipsis',},this.vNode)}}4銆侀〉闈㈢粍璋冪敤@import"./index.less";鏁堟灉璇存槑鎴戞槸涓€涓儹鐖卞墠绔殑鐢滃搧cc涔熷枩娆笓鏀诲悇绉嶄笌鑷繁宸ヤ綔鍏崇郴涓嶅ぇ鐨勬妧鏈紝鎶€鏈紝浜у搧鍏磋叮骞挎硾鑰屾祿鍘氾紝绛夊緟鍒涗笟鏈轰細锛屼富瑕佽嚧鍔涗簬鍒嗕韩瀹炵敤鐨勬妧鏈共璐э紝甯屾湜鑳界粰灏忎紬涓€浜涘皬甯姪浜恒€傛垜鎷掔粷鈥滄柊浜虹湅鎴忥紝鏂颁汉鐪嬫垙鈥濈殑鐜拌薄锛屽笇鏈涘拰澶у涓€璧峰姫鍔涙墦鐮磋繖绉嶅眬闈€傝惀閫犺壇濂界殑鎶€鏈皼鍥达紝涓轰釜浜猴紝涓烘垜鍥界殑鏁板瓧鍖栬浆鍨嬶紝涓虹墿鑱旂綉鎶€鏈紝涓烘暟瀛楃粡娴庣殑鍙戝睍鍋氱偣璐$尞銆傛暟椋庢祦浜虹墿杩樻槸鐪嬩腑鍥斤紝鐪嬪綋涓嬶紝鐪嬩綘鎴戙€?/p>