Vue3 开发拒绝 CV, 快使用 CRUD

开发管理后台基本是开V快企业的日常需求, 基本每个前台项目都必有一个后台项目跟着, 虽然是必需品, 但是大家好像有不是那么在意他, 毕竟只有管理员用。

crud-vue通过简单的发拒JSON配置即可实现完整的"增删改查".

注意: crud-vue是基于ant-design-vue的源码下载, 所以更进一步的开发中,可直接使用ant的组件

安装

yarn add crud-vue

使用

下面是一个简单的表格, 只需要配置columns和done字段.

columns就是"ant"组件库中 table 组件的配置, 用来配置列.

done是"crud-vue"定义的字段, 值是服务器租用个函数, 用来格式化接口返回数据, 函数返回{ total:10,list:[{ xx:1}]}这样的数据表格就会显示：

import crud,{ defineR} from crud-vue;

const primaryKey = id;

const r = defineR({

columns: [

{

title: name,

dataIndex: name,

},

{

title: 操作,

key: operation,

width: 250,

},

],

async done() {

const { data } = await http(/role);

return { list: data.list, total: data.total };

},

});

API

通过配置"crud-vue"组件的"c/u/r/d"4 个字段实现"增删改查".

primaryKey(主键)

必填项, ant 中的a-table需要, 选用数据中的能"表示唯一的id"字段即可.

image

r(读取)

必填项, 主要配置"表格"和"数据", 这里的表格实际就是