2018-08-20 09:30:02 +08:00
|
|
|
|
# D2 CRUD
|
2018-08-19 11:24:03 +08:00
|
|
|
|
|
2018-08-25 11:08:23 +08:00
|
|
|
|
## 介绍
|
2018-08-30 19:06:13 +08:00
|
|
|
|
`D2-Crud`是一套基于[Vue.js 2.2.0+](https://cn.vuejs.org/)和[Element 2.0.0+](http://element-cn.eleme.io/#/zh-CN)的表格组件,`D2-Crud`将 `Element` 的功能进行了封装,并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可根据配置的json实现,大大简化了开发流程。
|
|
|
|
|
|
|
|
|
|
|
|
## 功能
|
|
|
|
|
|
- 继承了 Element 中表格所有功能
|
|
|
|
|
|
- 新增表格数据
|
|
|
|
|
|
- 修改表格数据
|
|
|
|
|
|
- 删除表格数据
|
|
|
|
|
|
- 使用 Element 中的组件渲染表格内容和表单内容
|
|
|
|
|
|
- 表单校验
|
|
|
|
|
|
- 表格内编辑
|
2018-08-25 11:08:23 +08:00
|
|
|
|
|
|
|
|
|
|
## 安装
|
|
|
|
|
|
使用npm
|
|
|
|
|
|
``` bash
|
2018-08-26 18:23:15 +08:00
|
|
|
|
npm i element-ui @d2-projects/d2-crud -S
|
2018-08-25 11:08:23 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
使用yarn
|
|
|
|
|
|
``` bash
|
2018-08-26 18:23:15 +08:00
|
|
|
|
yarn add element-ui @d2-projects/d2-crud
|
2018-08-25 11:08:23 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 使用
|
|
|
|
|
|
在`main.js`中写入以下内容:
|
|
|
|
|
|
``` js
|
|
|
|
|
|
import Vue from 'vue'
|
|
|
|
|
|
import ElementUI from 'element-ui'
|
|
|
|
|
|
import 'element-ui/lib/theme-chalk/index.css'
|
2018-08-26 18:23:15 +08:00
|
|
|
|
import D2Crud from '@d2-projects/d2-crud'
|
2018-08-25 11:08:23 +08:00
|
|
|
|
|
|
|
|
|
|
Vue.use(ElementUI)
|
2018-08-26 18:23:15 +08:00
|
|
|
|
Vue.use(D2Crud)
|
2018-08-25 11:08:23 +08:00
|
|
|
|
|
|
|
|
|
|
new Vue({
|
|
|
|
|
|
el: '#app',
|
|
|
|
|
|
render: h => h(App)
|
|
|
|
|
|
})
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2018-08-30 19:06:13 +08:00
|
|
|
|
之后就可以在项目中使用`D2-Crud`了。
|
|
|
|
|
|
|
|
|
|
|
|
## 文档
|
|
|
|
|
|
[API](./api.md)
|
|
|
|
|
|
|
|
|
|
|
|
[使用示例](./example.md)
|