澶у濂斤紝鍙堟槸鎴戙€傛槰澶╋紝缇ら噷鏈変汉闂細鈥滃浣曞熀浜巈lementUI鎷栨嫿淇敼鍒楀锛屽苟鍦ㄥ琛ㄥ悓姝モ€濄€傝繖涓姛鑳藉叾瀹炲緢甯歌锛屼笉鍚岀敤鎴风溂涓殑渚ч噸鐐瑰簲璇ヤ笉涓€鏍枫€傛瘮濡傦細椤圭洰鐨勪富绠℃瘮杈冨叧蹇冨墠绔紑鍙戠殑杩涘害锛屼粈涔堟椂鍊欑粰鍚庣寮€鍙戞彁渚涜璁＄鍜屾帴鍙ｏ紝浠€涔堟椂鍊欏墠绔仛瀹岋紝浠€涔堟椂鍊欐帴鍏ユ祴璇曚汉鍛橈紝浠€涔堟椂鍊欐彁鍑烘祴璇曪紝瀵瑰簲鐨勪汉鏄皝銆傛垜浠殑鐩殑鏄拡瀵逛笉鍚岀殑浜虹兢鏄剧ず涓嶅悓鐨勫瓧娈靛拰涓嶅悓鐨勬帓搴忚鍒欙紙绱㈠紩锛屽浐瀹氾級銆傚ソ鍚э紝鎴戜滑鍏堟潵鍒嗘瀽涓€涓嬭瀹炵幇杩欐牱鐨勫姛鑳介渶瑕佸仛浜涗粈涔堛€俥lementUI鍦ㄥ墠鏈熺爺绌朵腑鏀寔鍝簺鍔熻兘鍜屽洖璋冿紵瀹藉害鎺у埗瀹藉害鍙互閫氳繃鍙傛暟鎺у埗鍚楋紵鎻愪緵锛屽彧闇€鍦╡l-table-column缁勪欢涓坊鍔爓idth灞炴€у嵆鍙€傚弬鏁版槸绗竴娆＄敓鏁堬紝杩樻槸鍔ㄦ€佹洿鏂帮紵鍔ㄦ€佹洿鏂版墍浠ヤ綘鍙互浣跨敤:width鏄惁鎻愪緵鎷栨斁璋冩暣瀹藉害鐨勮В鍐虫柟妗堬紵娣诲姞杈规骞跺惎鐢ㄥ彲璋冩暣澶у皬锛堥粯璁ゅ惎鐢級銆傛槸鍚︽彁渚涘洖璋冨嚱鏁帮紵header-dragend(newWidth,oldWidth,column,event)褰撴爣棰樿鎷栧姩鏀瑰彉鍒楀鏃惰Е鍙戣浜嬩欢銆傛槸鍚︽彁渚涜幏鍙栧綋鍓嶅搴﹂厤缃殑API锛熸病鏈夋彁渚涘瓧娈甸『搴忓彲浠ラ€氳繃鍙傛暟鎺у埗椤哄簭鍚楋紵娌℃湁鎻愪緵锛屽張鐪嬩簡涓€閬嶏紝鎼滅储鎺掑簭锛岄『搴忥紝绱㈠紩绛夊叧閿瘝锛屼竴鏃犳墍鑾枫€備富瑕佺殑鎺掑簭鍔熻兘鍦ㄥ唴瀹瑰尯鍩熴€傚鏋滀笉鑳介€氳繃鍙傛暟閰嶇疆锛岄偅collat鈥嬧€媔on浼氬奖鍝嶅埌鍝噷鍛紵鎴戜滑鍙互閫氳繃淇敼鐨勯『搴忔潵鎺у埗銆傜粡杩囧垎鏋愮爺绌秂lementUI锛屽彂鐜拌繖涓伐浣滃彲浠ュ畬鎴愮殑宸笉澶氫簡锛屽氨涓嶈€冭檻鍏朵粬鏂规浜嗐€傝В鍐宠幏鍙栧綋鍓嶅搴﹂厤缃殑闂鍗冲彲銆傛兂涓€鎯仇煠旓紝濡備綍鏀瑰彉瀹藉害锛熻繖涓嶅氨鏄痵tyle="width:10px"鍐呰仈鏍峰紡鍚楋紝澶畝鍗曚簡銆傛垜鎵撳紑鎺у埗鍙颁竴鐪嬶紝涔辩碂绯熺殑馃槀锛屾病鏈変粈涔堝共鍑€鐨勪笢瑗裤€傝繖澶璋变簡锛岎煪勯瓟娉曪紵鍝堝搱锛屽綋鐒朵笉鏄紝鎴戜滑鍙互鐪嬪埌鏈変竴涓猚olgroup锛宑ol鏍囩锛屼笓闂ㄧ敤鏉ユ帶鍒跺垪瀹界殑銆傞偅寰堢畝鍗曪紝鎴戜滑鍙互鐩存帴寰楀埌瀹冦€傚疄鐜颁唬鐮佸搴︽帶鍒讹紙鑷寘鍚級鐨勫叧閿槸娣诲姞border鏌ョ湅缂栬緫鎿嶄綔鍚庣殑瀹藉害@header-dragend閫氳繃@header-dragend鑾峰彇閫氱煡锛岀劧鍚庤幏鍙栬妭鐐逛笂鐨勭湡瀹炴暟鎹甴eaderdragend(newWidth,oldWidth,column,e){//鑾峰彇Trigger鑺傜偣锛屼篃灏辨槸浣犳嫋鍔ㄧ殑鏄摢涓€涓獀arel=e.target;//鑾峰彇褰撳墠琛ㄦ牸鐨刢olgroupcol鑺傜偣锛岀敤浜庡悗闈㈣幏鍙栧搴?/getParentNodes鏄ā浠?(el).parents()鏂规硶varcolList=getParentNodes(el,'table').querySelectorAll('colgroupcol');//鑾峰彇褰撳墠鎷栨嫿瀵硅薄鐨勭紪鍙凤紝鏂逛究鍚庣画妫€娴婦OM鏄惁鏇存柊varcurrentColIndex=this.tableTitleList.findIndex(item=>item.label==column.label);if(currentColIndex==-1){returnconsole.warn('Cannotfindthedragcolumn')}//淇敼閰嶇疆鍒楄〃锛屽皢褰撳墠鍒楄缃负鍥哄畾瀹藉害this.tableTitleList[currentColIndex].widthEnable=true;//鍚姩瀹氭椂浠诲姟鑾峰彇鏈€缁堝搴learInterval(headerDragendInterval)headerDragendInterval=setInterval(()=>{//鍒ゆ柇鐩爣鍒楃殑瀹藉害鏄惁涓烘渶缁堝搴f(colList[currentColIndex].width==newWidth){this.changeColumnWidth(colList);clearInterval(headerDragendInterval)}elseif(colList[currentColIndex].width==oldWidth){console.info('闇€瑕佺瓑寰呮覆鏌?)}else{console.warn('寮傚父鍊?);this.changeColumnWidth(colList);clearInterval(headerDragendInterval)}},10)}鎺у埗椤哄簭鍥犱负鏁扮粍鏄湁搴忕殑锛屾墍浠ョ敤v-for寰幆锛岀劧鍚庢敼鍙樻暟缁勪腑鐨勯『搴忥紝灏卞彲浠ユ敼鍙橀『搴忓憟鐜扮殑鍐呭鏌ョ湅Edit鎷栨嫿鎺掑簭杩欏潡锛屾垜鐩存帴鐢⊿ortable瀹炵幇鍔熻兘鍒氬ソ琚兢閲屼竴涓汉闂埌onEndinitSort(){varel=document.querySelector('#sortWrap')varthat=this;鏃跺悓姝ュ埌鏁版嵁婧愬氨鍙互浜哠ortable.create(el,{delay:100,sort:!0,forceFallback:!0,scrollSensitivity:100,animation:150,ghostClass:"gift-ghost-item",chosenClass:"gift-chosen-item",onEnd:function(t){that.tableTitleList.splice(t.newIndex,0,that.tableTitleList.splice(t.oldIndex,1)[0])}})},璧剁潃涓嬬彮蹇樿浜嗘祴璇曞湴鍧€锛歨ttp://www.lilnong.top/static/html/vue-elementUI-table-resize-thead.html
