vue+elementUI开发实践问题总结-白红宇

最近公司项目采用vue，实行前后端分离开发，采用element-ui框架，对于项目中遇到的问题进行记录，便于日后查询。

vue+elementui怎样点击table中的单元格触发事件？
官方文档是采用的cell-click方式。实际项目中需要在不同的td上触发不同事件，故采用可以使用template-scope方式实现。如下图所示

element-ui中table带了checkbox，获取选中数据的话，按照文档，需要先在table中绑定一个函数，假设如下


    
     复制代码

函数名称是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 属性，问题即可解决。

这是左侧红框的路由

{        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类即可。