浙江方远建设集团网站,seo研究协会,wordpress访问报错,网站开发新型技术最近公司项目采用vue#xff0c;实行前后端分离开发#xff0c;采用element-ui框架#xff0c;对于项目中遇到的问题进行记录#xff0c;便于日后查询。 vueelementui怎样点击table中的单元格触发事件#xff1f;官方文档是采用的cell-click方式。实际项目中需要在不同的t…最近公司项目采用vue实行前后端分离开发采用element-ui框架对于项目中遇到的问题进行记录便于日后查询。 vueelementui怎样点击table中的单元格触发事件官方文档是采用的cell-click方式。实际项目中需要在不同的td上触发不同事件故采用可以使用template-scope方式实现。如下图所示 element-ui中table带了checkbox获取选中数据的话按照文档需要先在table中绑定一个函数假设如下 el-table refjcqtTable v-loadingloading :datajcqtTableCon tooltip-effectdark stripe stylewidth: 100% selecthandleSelect
复制代码函数名称是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 classleftNavUlli classactiveLirouter-link to/pzgl/serviceManage active-classrouterActivespan classservice/span服务管理/router-link/lilirouter-link to/pzgl/hostManage active-classrouterActivespan classcloudhost/span主机管理/router-link/lilirouter-link to/pzgl/passwordManage active-classrouterActivespan classpasswordIcon/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类即可。
