element二开

最近公司项目采用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选中状态消失。需求效果如下图

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