有什么基于vue的UI比较好看的后台管理开源框架吗？d2-adm

2019-11-15 本文已影响0人 GreperXiao

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: '上海' }]}
    }
  ]
}