写在前面: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
以上问题循序渐进展开,经过本专栏,拿下组件库这一块