cl-crud

表格的增删改查操作。

useCrud

cl-crud 标签绑定 ref 值后使用 useCrud 加载组件

  • const 定义必须与 ref 一致
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: {
        add: "新增",
        delete: "删除",
        multiDelete: "删除",
        update: "编辑",
        refresh: "刷新",
        advSearch: "高级搜索"
    }
}

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>

示例

Last Updated: