Vue 实现CURD

现在低代码也流行一段时间，自己也写过一套低代码框架，也使用过微搭，想想为什么低代码还是没有完全流行起来，想想有2点原因

1. 会的开发不屑于使用
2. 不会的开发，使用了给带来了更多的学习成本

早在10年，还没有“前端”的年代，我领导安排我数据库配置字段，页面上展示响应的“插件”--和现在组件类似的功能，那时觉得这个想法挺好，奈何前端技术相比落后，还是jquery年代，现成的插件也不完善，自己那时对数据库了解也不是特别透彻，新增了表，怎么查询表头等信息也不知道，扯远了...

但是上面有个思路，我们所有的操作是围绕“数据”操作

1. 能否数据库定义“文本”类型，表单展示“输入框”，表格中显示“文本”
2. 能否数据库定义“数字”类型，表单展示“数字输入框”，表格中显示“数字”
3. 能否数据库定义“布尔”类型，表单展示“switch”，表格中显示“switch”
4. 能否数据库定义“枚举”类型，表单展示“单选、多选、下拉框”，表格中显示“单选、多选、下拉框”

说干就干, 微搭是数据库模型挺好的产品，参考定义数据文本类型

定义类型

export interface BaseModel {
  字段名称: string
  字段标识: string
  字段描述?: string
  是否必填?: boolean
  是否唯一?: boolean
}
export interface TextModel extends BaseModel {
  数据类型: '文本'
  格式: '单行文本' | '多行文本'
  最小长度?: number
  最大长度?: number
  默认值?: string
}

定义数据

const modelList = [{
  字段名称: 'Activity name',
  字段标识: 'name',
  是否必填: true,
  数据类型: '文本',
  格式: '单行文本',
  最大长度: 30,
  默认值: 'Hello',
}]

调用组件

52css.github.io/el-pro/comp…

查看效果

组件完成进度

• 文本
• 邮箱
• 电话
• 网址
• 布尔值
• 数字
• 枚举
• 日期时间
• 地区
• 自动编号
• 计算公式
• 文件
• 对象
• 数组
• 图片
• 关联关系
• 富文本