当前位置：首页 > Web前端 > JavaScript

Element-UI10个奇葩技巧，你知道几个？

时间：2023-03-27 00:05:23 JavaScript

.el-scrollbar{border:1pxsolid#ddd;height:200px;}.el-scrollbar::v-deep.el-scrollbar__wrap{overflow-y:scroll;婧㈠嚭-x锛氶殣钘忥紱}el-scrollbarScrollbar鐪嬬湅杩欎釜缁勪欢鏄笉鏄湁鐐归檶鐢熲€嬧€嬶紝涓嶇啛鎮夊氨瀵逛簡锛屽洜涓哄湪element鐨勫畼缃戜笂浠庢潵娌℃湁鍑虹幇杩囷紙浼拌鏄€ц兘闂锛夛紝浣嗘槸濂戒笢瑗挎€庝箞鑳借棌涓嶄綇鍛紝鏉ユ晥鏋滃浘涓娿€傛槸涓嶆槸姣斿師鏉ョ殑婊氬姩鏉℃紓浜浜嗭紝浣跨敤鏂规硶涔熷緢绠€鍗曪細娆㈣繋浣跨敤el-scrollbar{{item}}

.el-scrollbar{border:1pxsolid#ddd;height:200px;}.el-scrollbar::v-deep.el-scrollbar__wrap{overflow-y:scroll;婧㈠嚭-x锛氶殣钘忥紱}鍙婊氬姩鏉″唴閮ㄦ鐨勯珮搴﹁秴杩囨粴鍔ㄦ潯鐨勯珮搴︼紝灏变細鍑虹幇婊氬姩鏉★紝姘村钩婊氬姩鏉′篃鏄姝ゃ€俥l-upload妯℃嫙鐐瑰嚮鏈夋椂鍊欐垜浠兂浣跨敤el-upload鐨勪笂浼犲姛鑳斤紝浣嗘槸鍙堜笉鎯充娇鐢╡l-upload鐨勬牱寮忥紝鎬庝箞瀹炵幇鍛紵鏂规硶涔熷緢绠€鍗曪紝灏辨槸闅愯棌el-upload锛岀劧鍚庢ā鎷熺偣鍑汇€?button@click="handleUpload">涓婁紶鏂囦欢涓婁紶鏈湴鏂囦欢el-select涓嬫媺妗嗛€夐」澶闀匡紝鑰屼笖寰€寰€涓嬫媺妗嗙殑鍐呭鏄笉鍙帶鐨勶紝濡傛灉涓嬫媺妗嗛€夐」鐨勫唴瀹瑰お闀匡紝鍔垮繀浼氬鑷撮〉闈㈠緢涓嶅崗璋冦€傝В鍐虫柟妗堟槸鐪佺暐涓€琛屽苟娣诲姞鏂囨湰鎻愮ず銆?el-selectpopper-class="popper-class":popper-append-to-body="false"v-model="value"placeholder="Pleaseselect">

{{item.label}}

{{item.label}}

.el-select{width:300px;}.el-select::v-deep.popper-class{width:300px;}.iclass-text-ellipsis{绌虹櫧锛歯owrap;婧㈠嚭锛氶殣钘忥紱text-overflow:ellipsis;}鏁堟灉濡備笅锛歟l-input鐨勯灏句笉鑳戒负绌烘牸銆傛垜浠湪浣跨敤input杈撳叆妗嗙殑鏃跺€欙紝澶ч儴鍒嗛兘涓嶅笇鏈涚敤鎴峰湪鍓嶅悗杈撳叆绌烘牸銆傚綋鐒舵湁

鏁堟灉濡備笅锛歟l-inputtype=number杈撳叆涓枃锛岀劍鐐逛笂绉诲綋el-input璁剧疆涓簍ype="number",杈撳叆Chinese锛岃櫧鐒朵笉浼氭樉绀轰腑鏂囷紝浣嗘槸鐒︾偣浼氫笂绉汇€傝В鍐虫柟娉曪細::v-deep.el-input__inner{line-height:1px!important;}el-inputtype=number鍘绘帀鑱氱劍鏃剁殑涓婁笅绠ご瑙ｅ喅鏂规硶锛?el-inputclass="clear-number-input"type="number">.clear-number-input::v-deepinput[type="number"]::-webkit-outer-spin-button,.clear-number-input::v-deepinput[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none!important;}el-琛ㄥ崟浠呴獙璇佽〃鍗曠殑涓€涓瓧娈点€傛湁鏃跺€欐垜浠渶瑕佸崟鐙獙璇佷竴浜涘瓧娈碉紝姣斿鍙戦€侀獙璇佺爜锛屽崟鐙獙璇佹墜鏈哄彿銆備綘鍙互杩欐牱鍋氾細this.$refs.form.validateField('phone',valid=>{if(valid){console.log('send!');}else{console.log('errorsend!');returnfalse;}})el-dialog閲嶆柊鎵撳紑寮圭獥锛屾竻闄ゆ湁浜轰細鐨勮〃鍗曚俊鎭墦寮€寮圭獥鏃讹紝閲嶇疆$nextTick涓殑琛ㄥ崟锛屾垜閫夋嫨鍏抽棴寮圭獥鍚庨噸缃細

el-dialog鐨刣estroy-on-close灞炴€ц缃棤鏁堛€俤estroy-on-close璁剧疆涓簍rue鍚庯紝鍙戠幇寮圭獥鍏抽棴鍚嶥OM鍏冪礌杩樺湪锛屽苟娌℃湁琚攢姣併€傝В鍐虫柟妗堬細鍦╡l-dialog-if涓坊鍔爒銆?el-dialog:visible.sync="visible"v-if="visible"destroy-on-close>el-table琛ㄦ牸鍐呭瓒呭嚭閬楁紡褰撹〃鏍煎唴瀹硅繃澶氭椂long锛屾墜鍔ㄦ坊鍔犳牱寮忓緢楹荤儲锛屽伔鍋峰憡璇変綘锛屽彧闇€瑕佹坊鍔犱竴涓猻how-overflow-tooltip灏卞彲浠ユ悶瀹氥€?el-table-columnprop="address"label="address"width="180"show-overflow-tooltip>鏁堟灉濡備笅锛氭杩庤瘎璁哄尯浜ゆ祦锛屽鏋滃浣犳湁甯姪锛屽埆蹇樹簡鐐逛釜璧瀪鍚鍠滄鐨勪汉浠婂勾濂借繍鍝︷煒?/p>

上一篇：《关于在A页面操作B页面刷新数据这件事》

下一篇：JavaScript节流的渐进理解

Element-UI10个奇葩技巧，你知道几个？相关文章

最新推荐

猜你喜欢