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基礎(chǔ)上增強而來的的開源框架：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: '狀態(tài)',key: 'status', type: 'select', dict: { url: '/api/dicts/OpenStatusEnum'}，search: {disabled: false},},
    {title: '地區(qū)',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: '上海' }]}
    }
  ]
}

炒雞簡單、炒雞方便有木有

這么少的配置，那狀態(tài)、地區(qū)字段里面的單選、多選怎么出來的？

1. 字段類型<type>：每個字段可以配置一個type屬性，這個type屬性后面包含了一堆默認配置，示例中的type=select
2. 數(shù)據(jù)字典<dict>：配置數(shù)據(jù)字典之后，選擇組件就可以獲取到options，數(shù)據(jù)字典支持本地數(shù)據(jù)（配置dict.data），也可以支持遠程獲?。ㄅ渲胐ict.url）

還有更多組件，使用起來都一樣特別簡單

1. 省市區(qū)選擇組件

支持cascade和tree兩種方式選擇。
cascade方式適合獲取省市區(qū)的
tree方式適合只獲取節(jié)點的
只需要簡單的配置 type:'area-selector' 或者 type:'area-tree-selector' 就可以獲得如下這些效果

地區(qū)選擇組件

2. 文件上傳組件

支持騰訊云cos、阿里云oss、七牛云等3種方式的文件上傳

文件上傳

3. 國際電話輸入組件+校驗

國際電話校驗

4. 其他elementUI表單組件

5. 更多組件正在開發(fā)中

你也可以來提喲

如果這個項目對你有幫助，趕緊star起來

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