vue+elementUI開發實踐問題總結

最近公司項目採用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類便可。