el-data-tree

Use axios to automatically send requests, support filtering, customize action columns, and make RESTful CRUD simpler 👏

中文文档

Table of Contents

• Introduction
  • CRUD
• Feature
• Demo
• Pre Install
• Install
• Quick Start
  • Global Register Component
  • Template
• Contributors
• License

Introduction

CRUD

el-data-tree is created to solve business problems, so CRUD logic is set inside. For example, to develop user api, suppose its relative path like this:

/api/v1/users

The restful CRUD api should be:

• Retrieve

GET /api/v1/users?type=1

• Create

POST / api / v1 / users

• Update

PUT /api/v1/users/:id

• Delete

DELETE /api/v1/users/:id

Then only need to use the following code to complete CRUD functions

<template>
  <el-data-tree v-bind="treeConfig"></el-data-tree>
</template>

<script>
export default {
  data() {
    return {
      treeConfig: {
        url: '/example/users',
        dataPath: 'data.payload',
        showFilter: true,
        form: [
          {
            $type: 'input',
            $id: 'name',
            label: '用户名',
            $el: {
              placeholder: '请输入'
            },
            rules: [
              {
                required: true,
                message: '请输入用户名',
                trigger: 'blur'
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

The results are as follows：

• Retrieve

• Create

• Update

• Delete

⬆ Back to Top

Feature

• Use configuration to call restful api to complete CRUD functions
• Support custom menu bar, as well as custom action functions
• Save the expandedKeys by default and will not losing the expandedKeys state after calling create/delete/update apis
• Optimized node check method

⬆ Back to Top

Demo

• doc and online demo

⬆ Back to Top

Pre Install

This component peerDependencies on element-ui and @femessage/el-form-renderer and axiosmake sure you have installed in your project

yarn add element-ui @femessage/el-form-renderer axios

⬆ Back to Top

Install

Encourage using yarn to install

yarn add @femessage/el-data-tree

⬆ Back to Top

Quick Start

Global Register Component

This is for minification reason: in this way building your app, webpack or other bundler just bundle the dependencies into one vendor for all pages which using this component, instead of one vendor for one page

import Vue from 'vue'
// register component and loading directive
import ElDataTree from '@femessage/el-data-tree'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
  Button,
  Dialog,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Form,
  FormItem,
  Input,
  Loading,
  Tree,
  MessageBox,
  Message
} from 'element-ui'
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Loading.directive)
Vue.use(Tree)
Vue.component('el-form-renderer', ElFormRenderer)
Vue.component('el-data-tree', ElDataTree)
// to show confirm before delete
Vue.prototype.$confirm = MessageBox.confirm
// if the tree component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue.prototype.$axios = axios

⬆ Back to Top

Template

<template>
  <el-data-tree></el-data-tree>
</template>

⬆ Back to Top

Contributors

This project follows the all-contributors specification. Contributions of any kind welcome!

⬆ Back to Top

License

MIT

⬆ Back to Top