使用element-ui遇到过哪些问题——常见问题踩坑集合(一)

写在前面：element-ui目前是vue技术栈、中后台系统绝大部分前端选择的组件库解决方案，无论是从element-ui的基本使用，基于组件再次封装，还是到组件库源码实现，如何设计一个组件库都值得研究一番，本专栏围绕element-ui以上问题循序渐进展开，经过本专栏，拿下组件库这一块

本文内容大纲：

一、表格常见问题

1、分页搜索未重置导致搜索数据为空

背景： 带分页和可搜索的表格，当在非第一页时，改变搜索条件，再次点击搜索时，出现当页没有数据，且分页只显示总数据涉及到的页码，导致显示数据不对，且无法切换页码

eg：一个表单总共有24条数据

当在第一页搜索，cytest时，出现8条数据，正常显示清除搜索条件，切换到非第一页，这里切换到第二页，再次搜索cytest，这时候，请求的是第二页数据，出现如下情况，总共8条数据，页码换到了第一页，但是因为请求的是第二页，无数据 解决方案： 当搜索条件改变时，再次点击“搜索”时，需将页面pageNo置为1再请求

2、(批量)删除行操作后正好本页无数据需设置为上一页

背景： 表格带分页，删除行、批量删除行时，当删除到正好本页无数据时，出现本页无数据，页码仅展示1到上一页

解决方案： 在删除数据时，重新调用获取表格数据时增加判断，当currentPage > 1 && this.total <= (this.currentPage - 1) * this.pageSize时，把当前页置为上一页，并再次获表格数据

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

3、按时间排序列表有数据新增时出现重复数据

背景： 按时间倒序排序的列表，当数据库有新的数据加入时（新增n条），在非第一页下拉加载时，会重现重复的n条数据，举例，论坛有新的帖子发布

解决方案：接口请求参数需增加参数，第一页请求时间戳，或者列表第一项ID，确保后面下拉加载的数据经过了筛选

二、导航菜单

1、NavMenu导航

背景： 大家都知道NavMenu有高亮的状态，当页面A选中时，对应的导航菜单a状态是高亮的，这里的页面A，通常是一级菜单下的页面，而忽略了二级、三级等页面的高亮处理，最常见的就是列表页跳转到详情页，详情页对应的菜单是没做高亮处理的，用户体验不友好

解决方案： 结合NavMenu中的default-active属性和vue-router的自定义meta属性来解决

default-active表示当前激活菜单的index，default-active先取定义的meta.activeMenu，再取path，也就是说一级页面无需单独配置一级菜单，默认取path，二级、三级等页面通过meta.activeMenu配置，具体代码实现如下

// 菜单组件
<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>

// 路由配置
routes: [
  {
    path: '/a',
    component: '...',
    children: [
      {
        path: '/a/1',
        component: '...',
        meta: {
          title: '父页面',
          activeMenu:'/a'
       }
    }]
  }
]

写在后面：element-ui目前是vue技术栈、中后台系统绝大部分前端选择的组件库解决方案，无论是从element-ui的基本使用，基于组件再次封装，还是到组件库源码实现，如何设计一个组件库都值得研究一番，本专栏围绕element-ui以上问题循序渐进展开，经过本专栏，拿下组件库这一块

同系列：面试官：Vue项目中有封装过axios吗？怎么封装的？