cl-crud
表格的增删改查操作。
useCrud
- const 定义必须与 ref 一致
<cl-crud ref="Crud"></cl-crud>
const Crud = useCrud(options, callback?)
Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
service | 表示当前 crud 要操作的对象 | Service | ||
dict | 字典 | Dict | ||
permission | 权限 | Permission | ||
onDelete | 监听删除事件 | function(selection, {next}) | ||
onRefresh | 监听刷新事件 | function(params, {next,done,render}) |
dict
字典:
{
// 接口
api: {
list: "list",
add: "add",
update: "update",
delete: "delete",
info: "info",
page: "page"
},
// 分页
pagination: {
page: "page",
size: "size"
},
// 搜索
search: {
keyWord: "keyWord",
query: "query"
},
// 排序字段
sort: {
order: "order",
prop: "prop"
},
// 标签
label: {
op: "操作",
add: "新增",
delete: "删除",
multiDelete: "删除",
update: "编辑",
refresh: "刷新",
info: "详情",
search: "搜索",
reset: "重置",
clear: "清空",
save: "保存",
close: "取消",
confirm: "确定",
advSearch: "高级搜索",
searchKey: "搜索关键字",
placeholder: "请输入",
tips: "提示",
saveSuccess: "保存成功",
deleteSuccess: "删除成功",
deleteConfirm: "此操作将永久删除选中数据,是否继续?",
empty: "暂无数据"
}
}
permission
权限,控制新增、删除、编辑按钮显示隐藏。默认使用 service
中的 permission
,当然也能手动配置:
const Crud = useCrud({
permission: {
add: true,
delete: true,
update: true
}
});
onDelete
删除时触发,默认调用 service
中的 delete
方法 :
- selection 表格选中行的集合
- next(params) 继续执行删除
默认 params
取 selection
中的 id
:
const Crud = useCrud({
service: service.demo.goods,
onDelete(selection, { next }) {
next({
ids: selection.map((e) => e.id)
});
}
});
如需修改成根据其他字段删除数据(需后台接口配合),如下:
const Crud = useCrud({
service: service.demo.goods,
onDelete(selection, { next }) {
next({
names: selection.map((e) => e.name)
});
}
});
onRefresh
刷新时触发,默认调用 service
中的 page
方法:
- params 请求参数
- next(params) 继续执行刷新
- done() 完成刷新操作
- render(list, pagination) 渲染列表及分页信息
const Crud = useCrud({
service: service.demo.goods,
async onRefresh(params, { next, done, render }) {
// 1 默认调用
const { list } = await next(params);
// 2 使用其他接口,需手动 render
const { list, pagination } = await service.demo.goods.hotList();
// 渲染数据
render(list, pagination);
}
});
callback(app: ClCrud.Ref)
组件渲染完执行,并返回当前组件实例
使用
<template>
<cl-crud ref="Crud"></cl-crud>
</template>
<script lang="ts" setup>
import { useCrud } from "@cool-vue/crud";
const Crud = useCrud({ service: "test" });
</script>
配置 callback
加载完后调用 app.refresh
刷新页面:
<template>
<cl-crud ref="Crud"></cl-crud>
</template>
<script lang="ts" setup>
import { useCrud } from "@cool-vue/crud";
const Crud = useCrud({ service: "test" }, (app) => {
// 刷新请求
app.refresh({
// 可以带上你要请求的值
});
});
</script>
方法
方法名 | 说明 | 参数 |
---|---|---|
getPermission | 获取 add, update, delele 的权限 | |
getParams | 获取请求参数 | |
rowAdd | 以新增方式打开表单 | function() |
rowAppend | 以新增方式打开表单,并追加一些数据 | function(data) |
rowInfo | 以禁用表单的方式打开 | function(data) |
rowEdit | 以编辑方法打开表单 | function(data) |
rowClose | 关闭表单 | function() |
rowDelete | 删除请求 | function(selection) |
refresh | refresh | function(params) |