vue-element-crud v3.2.0-alpha

vue-element-crud

A wrapped vue CRUD component based on the famous vue UI componets -- element-ui.

一款基于 element-ui 组件的增删改查组件。

Here is a simple demo.

您可以阅读项目中的示例 examples 和源码文件 Crud.vue 来帮助您理解组件的具体用法。

Local development

You can download or clone this repository as long as you like it. Then you can run npm scripts

$ npm run build:watch

Usage

You can use vue-element-crud as a vue plugin or as a vue component.

If you'd like to treat it as a componet. You can import CRUD as components.

As component

import { CRUD } from 'vue-element-crud'
// or you can import from 'vue-element-crud/lib/crud.common' for en users

export default {
  components: { crud: CRUD },
}

Otherwise, you can treat it as a plugin.

As Plugin

Step-1, init project

You may need to init a vue project or take a existing one to continue as vue-loader or babel-loader or css-loader is required for element-ui.

$ vue init webpack <project-name>

Step-2, install

This component is dependent on element-ui, and element-ui will automatically installed when you install vue-element-crud, so you don't have to install element-ui in addition.

$ npm install -S vue-element-crud

Step-3, vue use

Add these lines below to your main.js

import 'element-ui/lib/theme-default/index.css'
import ElementUI from 'element-ui'
import CRUD from 'vue-element-crud'

Vue.use(ElementUI)
Vue.use(CRUD)

Step-4, refer to examples

You can read the docs or examples to find out how to implement props and methods of this vue-element-crud.

API

Your template may look like this.

<crud :data="data" :form="form" :rules="rules" :fields="fields" inline index
    :editing="editing" @open="handleOpen" @close="handleClose"
    @create="handleCreate" @update="handleUpdate" @destroy="handleDestroy" @submit="handleSubmit"/>

Here is a simple mixin that may help you to bootstrap it. Just import Simple.

import { Simple } from 'vue-element-crud'

export {
  mixins: [Simple]
}

Contribute

If you have some ideas about this component, please don't hesitate to let us konw. You can make a new issue to make it better.