列表
获取列表,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"
- 登陆成功时返回 当前页