最近公司項目采用vue，實行前后端分離開發，采用element-ui框架，對于項目中遇到的問題進行記錄，便于日后查詢。

• vue+elementui怎樣點擊table中的單元格觸發事件？
  官方文檔是采用的cell-click方式。實際項目中需要在不同的td上觸發不同事件，故采用可以使用template-scope方式實現。如下圖所示

• element-ui中table帶了checkbox，獲取選中數據的話，按照文檔，需要先在table中綁定一個函數，假設如下

<el-table ref="jcqtTable" v-loading="loading" :data="jcqtTableCon" tooltip-effect="dark" stripe style="width: 100%" @select="handleSelect"> 復制代碼

函數名稱是handleSelect，然后methods中定義這個方法

handleSelect(val) {this.multipleSelection = val;console.log("選中數據"+val);let jcId = [];this.multipleSelection.map((item) => {jcId.push(item.id)});console.log("選中數據id:"+jcId);return jcId;} 復制代碼

• 實際開發中需要嵌套路由，這算常見需求吧！但是，第一次使用就遇到了坑，嵌套路由中默認選中第一個子路由，在子路由切換過程中，主路由tab狀態應該保持選中狀態，剛開始的時候，切換子路由，主路由tab選中狀態消失。需求效果如下圖 上面紅框代表主路由，左側紅框代表子路由。為了實現主路由和子路由同時選中的狀態，查閱多方資料，終于找到了解決辦法。router-link 作為 vue 中的路由跳轉標簽，它內置有一個選中的狀態，當處于當前路由時，會給 router-link 加一個 router-active-class，即選中狀態的 class，同時還提供有一個 exact 屬性，當加了 exact 屬性的時候表示精確匹配，也就是會精確匹配 Url，所以如果給主路由設置了 exact 屬性的話，當處于子路由時，Url 就匹配不到主路由了，那么主路由也就不會處于選中狀態。所以解決辦法就是不要在主路由和子路由的 router-link 上設置 exact 屬性，問題即可解決。

<ul class="leftNavUl"><li class="activeLi"><router-link to='/pzgl/serviceManage' active-class="routerActive"><span class="service"></span>服務管理</router-link></li><li><router-link to='/pzgl/hostManage' active-class="routerActive"><span class="cloudhost"></span>主機管理</router-link></li><li><router-link to='/pzgl/passwordManage' active-class="routerActive"><span class="passwordIcon"></span>密碼維護</router-link></li></ul> 復制代碼

這是左側紅框的路由

{path: '/pzgl',name: 'pzgl',redirect: '/pzgl/serviceManage',component: pzgl,children: [{path: 'serviceManage',component: serviceManage}, {path: 'hostManage',component: hostManage}, {path: 'passwordManage',component: passwordManage}]} 復制代碼.leftNavUl li a.routerActive{background: #409eff;color: #ffffff;.service{background: url('../assets/images/service_active.png') no-repeat;}.cloudhost{background: url('../assets/images/cloudhost_active.png') no-repeat;}.passwordIcon{background: url('../assets/images/password_active.png') no-repeat center;}} 復制代碼

css代碼大致就是這樣，設定好一個激活狀態的css類即可。

總結

以上是生活随笔為你收集整理的vue+elementUI开发实践问题总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。