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) 继续执行删除

默认 paramsselection 中的 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)
refreshrefreshfunction(params)

示例

Last Updated: