# Crud 增删改查

快速完成页面 CRUD 操作的高阶组件

支持功能:

  • 条件过滤
  • 条件查询
  • 关键字搜索
  • 高级搜索
  • 新增、编辑动态表单配置
  • 自定义表单
  • 可拖拽、全屏对话框
  • 数据表格右键菜单
  • 按钮级权限控制
  • 多种渲染方式,jsx、函数式、组件实例、组件名

示例

# 参数

参数 说明 类型 可选值 默认值
on-refresh 刷新表格的钩子 function(params, { next, done, render })
on-delete 删除时的钩子 function(selection, { next })
border 是否带有边框 boolean false

on-refresh 示例

<cl-crud :on-refresh="onRefresh"></cl-crud>
export default {
	methods: {
		async onRefresh(params, { next, done, render }) {
			// params 是每次请求的参数
			// next(params) 是继续往下执行 page 的请求
			// done() 完成请求,关闭loading
			// render(list, pagination) 渲染列表及分页信息

			let { list, pagination } = await next({
				...params,
				...额外的参数
			});

			list.map(e => {
				e.name += "先生";
			});

			render(list);

			// 也可以不使用 next,用其他 service 代替,但是 render 就要设置分页信息:
			render(list, {
				page: "第几页",
				size: "每页数量",
				total: "总数"
			});
		}
	}
};

on-delete 示例

<cl-crud :on-delete="onDelete"></cl-crud>
export default {
	methods: {
		onDelete(selection, {next}) {
			// selection 行选择列表,默认
			// next(params) 是继续往下执行 delete 的请求

			// 默认根据表id来删除,你也可以修改成其他
			next(selection.map(e => e.id))
		}
	}
};

# 方法

方法名 说明 参数
getPermission 获取 add, update, delele 的权限 key
getParams 获取 请求参数
rowAdd 以新增方式打开表单
rowAppend 以新增方式打开表单,并追加一些数据 data
rowEdit 以编辑方法打开表单 data
rowClose 关闭表单
rowDelete 删除请求 selection
openAdvSearch 打开高级搜索
closeAdvSearch 关闭高级搜索
refresh 刷新请求 params

# 事件

事件名 说明 回调参数
load 组件加载完事件 { app, ctx }

load 回调配置说明(重点)

# ctx

方法名 说明 参数
service 设置请求服务 { page?, list?, update?, info?, add?, delete? }
permission 设置权限,默认根据 permmenu 配置 { add, update, delete }
set 设置其他参数 { dict, }
on 监听事件 { name, callback }
once 监听事件(只监听一次) { name, callback }
done 完成配置,开始渲染

# app

方法名 说明 参数
refresh 刷新表格,默认调用 page 接口 params