最近公司项目采用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类即可。