有什么基于vue的UI比较好看的后台管理开源框架吗?d2-admin了解一下

d2-admin

演示地址:https://d2.pub/d2-admin/preview/
项目地址:https://github.com/d2-projects/d2-admin/
先来看看d2-admin的截图,相当惊艳

登录界面
首页
主题切换

后台管理框架crud非常重要

d2-admin当然也有它的d2-crud
d2-crud

不过d2-crud相当难用,配置极其繁琐,字段配置一套,添加又要配置一套,修改还要配置一套,还有查询、表单验证、删除,都要自己配一套

return {
     columns: [ 
        {title: '日期',key: 'date' },
        {title: '姓名', key: 'name'},
        {title: '地址', key: 'address' }
      ],
      editTemplate: {
        date: {title: '日期',  value: '' },
        name: { title: '姓名', value: '' },
        address: {  title: '地址',value: ''},
      },
     addTemplate: {
        date: {title: '日期',  value: '' },
        name: { title: '姓名', value: '' },
        address: {  title: '地址',value: ''},
      },
    search:{...},
    rules:{...}
}

有没有 更简单、更好用 的crud?
有,这里要推荐一个在d2-crud基础上增强而来的的开源框架:d2-crud-plus
让重复的crud不再浪费你的宝贵时间。

d2-crud-plus

项目地址:https://github.com/greper/d2-crud-plus
演示地址:http://qiniu.veryreader.com/D2CrudPlusExample/index.html

只需要下面这么几个简单的配置,一个完全体crud就粗来了

export const crudOptions = {
  columns: [
    {title: '日期',key: 'date',type: 'date',search: {disabled: true}},
    {title: '状态',key: 'status', type: 'select', dict: { url: '/api/dicts/OpenStatusEnum'},search: {disabled: false},},
    {title: '地区',key: 'province',type: 'select', search: {disabled: false},
      component: {props: {filterable: true,multiple: true,clearable: true}},
      dict: {data: [{ value: 'sz', label: '深圳' }, { value: 'gz', label: '广州' }, { value: 'wh', label: '武汉' }, { value: 'sh', label: '上海' }]}
    }
  ]
}

炒鸡简单、炒鸡方便有木有
真这么简单?我不信,我要亲自去看看效果:http://qiniu.veryreader.com/D2CrudPlusExample/index.html#/test

这么少的配置,那状态、地区字段里面的单选、多选怎么出来的?
  1. 字段类型:每个字段可以配置一个type属性,这个type属性后面包含了一堆默认配置,示例中的type=select
  2. 数据字典:配置数据字典之后,选择组件就可以获取到options,数据字典支持本地数据(配置dict.data),也可以支持远程获取(配置dict.url)
还有更多组件,使用起来都一样特别简单
1. 省市区选择组件

支持cascade和tree两种方式选择。
cascade方式适合获取省市区的
tree方式适合只获取节点的
只需要简单的配置 type:‘area-selector’ 或者 type:‘area-tree-selector’ 就可以获得如下这些效果
地区选择组件
去看看: http://qiniu.veryreader.com/D2CrudPlusExample/index.html#/form/area

2. 文件上传组件

支持腾讯云cos、阿里云oss、七牛云等3种方式的文件上传
文件上传

3. 国际电话输入组件+校验

国际电话校验

4. 其他elementUI表单组件

5. 更多组件正在开发中

你也可以来提哟

####如果这个项目对你有帮助,赶紧star起来
项目地址:https://github.com/greper/d2-crud-plus
演示地址:http://qiniu.veryreader.com/D2CrudPlusExample/index.html

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值