前端日常搬砖指南

张仪ranck

列表

获取列表,filter 参数,分页参数

  • table

    • 表格最大高度
    • 其他操作选项(操作栏提供更多下拉选项)
    • 操作禁止 disabled [ || 组合 ]
  • columns

    • 字段超出
    • 字段是数组
    • 宽度溢出
    • flex 时候 overflow hidden
    • 排序

分页

  • pageSize
  • pageNum
  • 数据请求时机
  • 最后一页扩大pageSize时候避免重复请求 监听onPageChange合并current和size参数统一请求

删除最后一页的所有

vue中的current通常是一个data里定义的变量。删除最后一页的最后一条时候,分页变量的值没改变,所以删除后的重新请求会携带原来最后一页的参数。导致查询不到数据。

解决办法:删除后先重新计算当前页信息,重新赋值然后再请求列表。

代码如下:(考虑批量删除会删除多条)

/**
 * 计算批量删除后停留页
 * @param {number} total
 * @param {number} deleteCount
 * @param {number} pageSize
 * @param {number} current
 * @returns page
 */
export const afterBatchDelete = (total, deleteCount, pageSize, current) => {
  const lastPage = Math.ceil((total - deleteCount) / pageSize) || 1;
  return current > lastPage ? lastPage : current;
};

调用时机:触发删除/批量删除成功后,重新获取列表前赋值

  • 删除

    • 二次确认
  • 下载文件
  • 操作选项禁止

数据请求

  • getDataList
  • tableData = []
  • loading
  • 记录query参数,以便于刷新时候重载

modal

  • title
  • 自定义header
  • 数据加载loading
  • 防止重复点击,btnLoading
  • 内置表单

    • 灵活布局
    • 快速配置 formlist
  • 抛出事件 emit success
  • 字段校验
  • 特殊字段表单

    • 一个label,多个字段
    • 可增加的表单组合
  • 编辑

    • 获取初始值getById
    • 移除更新干扰字段,id

鉴权

  • 菜单层面
  • 路由层面
  • 组件层面

登录过期

  • 使用过程中登录过期

    • 记录当前url以及参数
    • 提示登录过期
    • 作为query returnUrl 传入跳转 login页面 goto="/current/page"
    • 登陆成功时返回 当前页
阅读 162
368 声望
4 粉丝
0 条评论
368 声望
4 粉丝
文章目录
宣传栏