Recently, the company adopts VUE to separate the development of the front and back ends, and adopts the Element-UI framework to record the problems encountered in the project for future inquiry.

  • How can Vue +elementui click on a cell in a table to trigger an event? Official documentation is cell-click. In actual projects, different events need to be triggered on different TDS. Therefore, template-Scope can be used to implement this method. As shown in the figure below

  • To retrieve the selected data, bind a function to the table according to the document, assuming the following

<el-table ref="jcqtTable" v-loading="loading" :data="jcqtTableCon" tooltip-effect="dark" stripe style="width: 100%" @select="handleSelect">
Copy the code

The function name is handleSelect, and you define this method in Methods

handleSelect(val) {
        this.multipleSelection = val;
        console.log("Select data"+val);
        let jcId = [];
        this.multipleSelection.map((item) => {
            jcId.push(item.id)
        });
        console.log("Select data ID :"+jcId);
        return jcId;
    }
Copy the code
  • The actual development needs to set routines by, this is a common requirement! However, the first time it was used, the first child route was selected by default. During the child route switchover, the TAB state of the main route should remain selected. At the beginning, when the child route is switched, the TAB state of the main route disappears. The demand effect is shown below

    The red box above represents the primary route and the red box on the left represents the child route. In order to realize the state of primary and sub-routes being selected at the same time, I consulted various data and finally found a solution. Router-link, as a route forward label in the VUE, has a built-in selected state. When the route is in the current state, router-active-class is added to the router-link, which also provides an exact attribute. When the exact attribute is added, the exact Url is matched. Therefore, if the exact attribute is set for the primary route, the Url cannot match the primary route when the primary route is in the child route, and the primary route will not be selected. Therefore, the solution is not to set the exact attribute on the router-link of the primary and child routes.

<ul class="leftNavUl">
        <li class="activeLi">
          <router-link to='/pzgl/serviceManage' active-class="routerActive">
            <span class="service"></span> Service management </router-link> </li> <li> <router-link to='/pzgl/hostManage' active-class="routerActive">
            <span class="cloudhost"></span> Host management </router-link> </li> <li> <router-link to='/pzgl/passwordManage' active-class="routerActive">
            <span class="passwordIcon"></span> Password maintenance </router-link> </li> </ul>Copy the code

This is the route in the red box on the left

{
        path: '/pzgl',
        name: 'pzgl',
        redirect: '/pzgl/serviceManage',
        component: pzgl,
        children: [{
            path: 'serviceManage',
            component: serviceManage
        }, {
            path: 'hostManage',
            component: hostManage
        }, {
            path: 'passwordManage',
            component: passwordManage
        }]
    }
Copy the code
.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; }}Copy the code

The CSS code basically looks like this, setting up an active CSS class.