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类便可。