开发治理后盾根本是企业的日常需要, 根本每个前台我的项目都必有一个后盾我的项目跟着, 尽管是必需品, 然而大家如同有不是那么在意他, 毕竟只有管理员用, 明天咱们讲一下"增删改查"组件:v-curd.
v-curd通过简略的JSON配置即可实现残缺的"增删改查".
留神: v-curd是基于ant-design-vue的, 所以更进一步的开发中,可间接应用ant的组件
装置
yarn add v-curd应用
上面是一个简略的表格, 只须要配置columns和done字段.
columns就是"ant"组件库中 table 组件的配置, 用来配置列.
done是"v-curd"定义的字段, 值是个函数, 用来格式化接口返回数据, 函数返回{total:10,list:[{xx:1}]}这样的数据表格就会显示.
<script setup lang="ts">import curd,{defineR} from 'v-curd';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 }; },});</script><template> <curd :primaryKey="primaryKey" :r="r"></curd></template>API
通过配置"v-curd"组件的"c/u/r/d"4 个字段实现"增删改查".
primaryKey(主键)
必填项, ant 中的a-table须要, 选用数据中的能"示意惟一的id"字段即可.
r(读取)
必填项, 次要配置"表格"和"数据", 这里的表格理论就是ant的table组件, 应用defineR函数定义.
const r = defineR({ // 列配置 columns: [{ title: 'name', dataIndex: 'name' }], // 筛选条件配置 conditionItems: [{ name: 'name', is: 'a-input' }], // 列表接口数据处理 async done() { const { data } = await http('/user'); return { list: data.xxList, total: data.xxTotal }; },});查看"r"的残缺文档
c(新增)
非必填, 用来结构"新建"表单,用defineC函数来定义.
const c = defineC({ async before() { await Promise.all([getRoleOptions(), getDepartmentOptions(), getPositionOptions()]); }, async done(formData) { const { status, data } = await http.post('/user', formData); return [200 === status, data.msg]; }, formProps: { labelCol: { span: 2 } }, items: () => [ { is: 'a-input', name: 'userName', label: '账号', rules: [{ required: true, message: '必填项' }] }, { is: 'a-input', name: 'realName', label: '姓名' },查看"c"的残缺文档
u(编辑)
非必填, 用来结构"编辑"表单,用defineU函数来定义.根本和"c"的配置一样.
查看"u"残缺的文档
d(删除)
非必填, 用来配置"删除操作",用defineD函数来定义. d暂只有一个属性done:
done
必填项, done是个函数, 点击"删除"按钮后触发, 函数内须要写申请删除接口的逻辑.
const d = defineD({ async done(idList) { // 判断idList长度辨别是否批量删除 // 批量删除 if (1 < idList.length) { const { data, status } = await http.delete('/user/' + idList.join(',')); return [200 === status, data.msg]; } else { // 删除一条 const { data, status } = await http.delete('/user/' + idList[0]); return [200 === status, data.msg]; } },});能够通过done的参数来判断是批量删除还是单行删除.
特地留神
done必须是一个返回"promise"的函数, 也能够用"async", 其返回值也是"promise".done函数的返回值必须是[boolean,string?]格局, "boolean"用来示意是否操作胜利, "string"是选填,是胜利/失败后音讯框显示的文字, 如果不填, 不进行音讯显示.