Write in front: At present, Element-UI is the component library solution chosen by most of the front end of VUE technology stack, middle and background system. Whether it is from the basic use of Element-UI, repackaging based on components, or to realize the source code of component library, how to design a component library is worth studying. This column focuses on the above element-UI issues step by step. After this column, component libraries are taken down

Outline of the content of this paper:

I. Common problems in the form

1. The search data is empty because the paging search is not reset

Background: The table with pagination and searchable. When you change the search criteria and click search again when it is not the first page, there will be no data on the page and only the page number involved in the total data will be displayed, resulting in incorrect display data and unable to switch page numbers

Eg: A form has a total of 24 pieces of data

When searching for cytest on the first page, 8 data items appear and are displayed normallyClear the search criteria, switch to the non-first page, here switch to the second page, search Cytest again, at this time, the request is the second page of data, the following situation occurs, a total of 8 data, page number changed to the first page, but because the request is the second page, no data Solution:When the search criteria are changed, click “Search” again, and set the page pageNo to 1 before requesting

2. (batch) Set the page to the previous page when there is no data on the page after deleting rows

Background: The table is paginated. When rows are deleted or deleted in batches, when there is no data on this page, there is no data on this page, and the page numbers are only displayed from 1 to the previous page

Solution: CurrentPage > 1 && this.total <= (this.currentpage – 1) * this.pageSize, set currentPage to previous page and retrieve table data again

getData(){ 
  if(this.currentPage > 1 && this.total <= (this.currentPage - 1) *this.pageSize){
     this.currentPage = this.currentPage - 1;
     this.getData(); }}Copy the code

3. Repeated data occurs when new data is added to the sorted list by time

Background: a list sorted in reverse chronological order. When new data is added to the database (n items are added), repeated N items of data will be reproduced in the non-first page drop-down load, for example, new posts are published in the forum

Solution: Interface request parameters need to add a parameter, the first page request timestamp, or the ID of the first item in the list to ensure that the data after the drop-down load is filtered

Navigation menu

1. NavMenu navigation

Background: NavMenu have highlighted is known to all, when the page is A selected, the corresponding state of A navigation menu is highlighted, the page A, here is usually level under the menu page, rather than the secondary, tertiary, such as page highlighting one of the most common is list page jump to the details page, the details page is not doing highlighting the corresponding menu, the user experience is not friendly

Solution: Combine NavMenu default-active attribute and vue-router custom meta attribute to solve the problem

Default-active indicates the index of the current activation menu. Default-active takes the defined meta.activeMenu first and then path. Level 2 and level 3 pages are configured through meta.activeMenu, and the specific codes are as follows

// Menu components<template>
    <el-menu
      class="sidebar-el-menu"
      :default-active="activeMenu"
      :collapse="collapse"
      text-color="#fff"
      active-text-color="#fff"
      background-color="#0e0d0a"
      unique-opened
      router>
        <div
            v-for="(item, index) in menuList"
            :key="`menuItem${index}`"
          >
           <el-menu-item
              v-if=! "" item.children"
              :index="item.path"
              class="menu-item"
            >
              {{item.meta.title}}
            </el-menu-item>

           <el-submenu
              v-else
              :index="item.path"
              class="menu-item"
            >
              <el-menu-item
                v-for="(subItem, subIndex) in item.children"
                :key="`subMenuItem${index}${subIndex}`"
                :index="`${subItem.path}`"
                class="submenu-item"
              >
                {{item.meta.title}}
              </el-menu-item>
            </el-submenu>   
        </div>
    </el-menu>
</template>

<script>
export default {
  computed: {
    activeMenu() {
      return (this.$route.meta && this.$route.meta.activeMenu) || this.$route.path
    }
  }
}
</script>
Copy the code
// Route configuration
routes: [{path: '/a'.component: '... '.children: [{path: '/a/1'.component: '... '.meta: {
          title: 'Parent page'.activeMenu:'/a'}}}]]Copy the code

Write at the back: At present, Element-UI is the component library solution chosen by most of the front end of VUE technology stack, middle and background system. Whether it is from the basic use of Element-UI, repackaging based on components, or to realize the source code of component library, how to design a component library is worth studying. This column focuses on the above element-UI issues step by step. After this column, component libraries are taken down

Interviewer: Has axios been packaged in the Vue project? How is it packaged?