Vue实现element默认展开和选中
vue组件中添加Element-UI进入项目，打开终端执行：
npm i element-ui -S
在main.js中引用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
项目中的使用：
效果一，实现默认展开一级目录-行业聚焦：
template：
script和style：
效果二，实现默认展开天下大势，并选中国际新闻：
修改<el-menu :default-openeds="['4']" active-text-color="#00C0FF">为
<el-menu :default-active="defaultActive" active-text-color="#00C0FF">
defaultActive的赋值在onLoad()中
注意：如果点击一级目录需要响应事件，可以使用@click.native，添加后点击下级目录会响应本级及以上的所有点击事件
绛旓細vue缁勪欢涓坊鍔Element-UI 杩涘叆椤圭洰锛屾墦寮缁堢鎵ц锛歯pm i element-ui -S 鍦╩ain.js涓紩鐢 import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);椤圭洰涓殑浣跨敤锛氭晥鏋滀竴锛瀹炵幇榛樿灞曞紑涓绾х洰褰-琛屼笟鑱氱劍锛歵emplate锛歴cript鍜宻tyle锛氭晥鏋滀簩锛屽疄鐜伴粯璁...
绛旓細vue椤圭洰涓粡甯镐細鐢ㄥ埌element ui锛屾湁鏃跺欓渶瑕佷慨鏀榛樿鐨勬牱寮忥紝姣斿琛ㄦ牸锛屽鑸爮绛夛紝杈撳叆妗嗙瓑绛夈傚彲浠ョ敤浠ヤ笅涓ょ鏂瑰紡淇敼锛1.缁欑粍浠跺姞涓奿d鎴栬卌lass锛岀劧鍚庢坊鍔犱竴涓猻tyle锛屼笉瑕佸姞scoped锛坴ue鍙互鏈夊涓猻tyle锛夛紝鍦ㄧ粍浠堕噷鐩存帴淇敼 2.澶栭儴寮曞叆css鏂囦欢锛岄粯璁ゆ牱寮忎細琚鐩 3.鍒╃敤娣卞害::v-deep娣卞害淇敼缁勫缓鐨勬牱寮...
绛旓細鍦element-ui涓噰鐢∟avMenu瀵艰埅鑿滃崟浣滀负绯荤粺鑿滃崟鐨瀹炵幇銆傚畼鏂规枃妗ｄ腑NavMenu瀵艰埅鑿滃崟鏈変竴涓狹enu Attributes灞炴ollapse锛屾槸涓涓 bollean 绫诲瀷锛岀敤浜庢帶鍒舵槸鍚︽按骞虫姌鍙犺彍鍗曘傛垜浠彲浠ラ氳繃璁剧疆collapse灞炴х殑鍊间负 true 鎴 false 鏉ユ帶鍒惰彍鍗曠殑鎶樺彔涓庡睍寮銆傝В鍐虫柟妗 1.瀹炵幇涓涓寜閽紝2.鍦╠ata涓畾涔変竴涓暟鎹甤ollapse...
绛旓細瀹夎涓婚宸ュ叿npm i element-theme -g2锛屽畨瑁卌halk涓婚锛屽彲浠ヤ粠 npm 瀹夎鎴栬呬粠 GitHub 鎷夊彇鏈鏂颁唬鐮# 浠 npmnpm i element-theme-chalk -D# 浠 GitHubnpm i https://github.com/ElementUI/theme-chalk -D浜屻佸垵濮嬪寲鍙橀噺鏂囦欢et -i [鍙互鑷畾涔夊彉閲忔枃浠讹紝榛樿涓篹lement-variables.scss]> ? Genera...
绛旓細1銆榛樿绂佺敤鏁堟灉 绂佺敤鐢╯electable鎺у埗 table鐨刲ist鏁版嵁闇瑕佹湁涓瓧娈垫爣璇嗘槸鍚︾鐢 渚嬪canChoose 2銆侀粯璁ら変腑鏁堟灉 鏄惁閫変腑锛 this.$refs.multipleTable.toggleRowSelection(row, boolean)
绛旓細鎴戜娇鐢ㄧ殑element-ui鐗堟湰涓2.15.13锛vue-cli鐗堟湰涓4.5.15锛寁ue鐗堟湰涓2.6.11銆備负浜瀹炵幇寮圭獥鏁堟灉锛屾垜鍦ㄤ竴涓猨s鏂囦欢涓紩鍏ヤ簡Message缁勪欢锛屽苟鎸夌収浠ヤ笅鏂瑰紡浣跨敤瀹冿細杩欐牱鎿嶄綔鍚庯紝鍒锋柊椤甸潰灏变細鏄剧ず寮圭獥銆傚垱寤虹櫥褰曢〉闈㈠悗锛屽埛鏂伴〉闈㈡椂鍑虹幇浜嗗涓嬪脊绐楋細閫氳繃瑙傚療娴忚鍣ㄢ滃厓绱犫濋夐」鍗★紝鍙互鐪嬪埌浼撮殢寮圭獥鍑虹幇鐨刣iv鍏冪礌...
绛旓細閲嶇偣鍦ㄤ簬搴旂敤Vue鐨勮矾鐢卞姛鑳戒笌ElementUI缁勪欢銆傝矾鐢辫烦杞椤甸潰闂寸殑鍒囨崲娴佺晠鏃犵棔锛屾槸鏋勫缓鍗曢〉闈㈠簲鐢紙SPA锛夌殑鍏抽敭銆傚紩鍏lementUI锛屽苟浣跨敤鍏禖ontainer甯冨眬瀹瑰櫒涓嶯avMenu瀵艰埅鑿滃崟锛瀹炵幇鐣岄潰缁撴瀯娓呮櫚锛屽姛鑳藉垎鍖烘槑纭傚湪main.js涓紩鍏lementUI搴擄紝闅忓悗鐩存帴鏋勫缓椤甸潰甯冨眬銆傞氳繃Container缁勪欢鍒掑垎椤甸潰鍖哄煙锛屽澶撮儴銆佷晶杈规爮銆...
绛旓細5.鐐瑰嚮閮ㄩ棬灞曞紑鏀惰捣,鍙湁鏈儴闂ㄦ椂榛樿灞曞紑 浜: 鐭ヨ瘑鐐(1):鑾峰彇鏁版嵁鐭ヨ瘑鐐(2):娓叉煋鐭ヨ瘑鐐(3):鐐瑰嚮閮ㄩ棬灞曞紑鏀惰捣,鍙湁鏈儴闂ㄦ椂榛樿灞曞紑鐐瑰嚮灞曞紑鐨勬椂鍊欒鏀瑰彉宸︿晶绠ご鐨勬牱寮 鍦ㄦ涔嬪墠鎴戜滑鐨勬暟鎹噷鏄病鏈塱s_open杩欎釜灞炴х殑,鎵浠ラ渶瑕佽嚜宸变紶杩涘幓 let search_persons = res.data; search_persons.forEach(person=>{...
绛旓細4銆佸叏閫夋寜閽紝璁剧疆涓変釜鐘舵侊紝鍏ㄩ夈佸彇娑堝叏閫夈佹湭閫変腑锛屼笉鍚岀姸鎬佸搴斾笉鍚岀殑鍥炬爣锛岀偣鍑绘搷浣滄椂寮濮嬭繘琛屽浘鏍囦互鍙婄浉搴斿姛鑳界殑鍒囨崲锛岀偣鍑诲崟涓猚heckbox鏃讹紝鑾峰彇褰撳墠閫変腑鐨勭粍杩涜鍖归厤锛屾洿鏂板叏閫夋寜閽殑鐘舵併1銆丆heckBox鐨刱ey鍊艰缃负key-positionID锛屼繚璇佹瘡娆lick鎴栬卌hange閮借兘鎵惧埌褰撳墠鎿嶄綔鐨勯潰鏉匡紝淇濊瘉鍞竴鎬э紝淇濆瓨鏃跺啀...
绛旓細閫氳繃浜嗚В锛岀粨鍚vue鐨勭壒娈婂睘鎬ef寮曠敤鍒癉om鍏冪礌涓婏紝鍐嶆墽琛宒om涓婄殑toggleRowSelection鏂规硶銆倀oggleRowSelection(row, selected)鎺ュ彈涓や釜鍙傛暟锛宺ow浼犻掕鍕鹃夎鐨勬暟鎹紝selected璁剧疆鏄惁閫変腑 娉ㄦ剰锛氳皟鐢╰oggleRowSelection杩欎釜鏂规硶 闇瑕佽幏鍙栫湡瀹瀌om 鎵浠ラ渶瑕佹敞鍐 ref 鏉ュ紩鐢ㄥ畠 浜.鎿嶄綔 (涓).榛樿閫変腑 1.褰...
