Skip to content

FEMessage/el-data-tree

Repository files navigation

el-data-tree

Build Status NPM Download NPM Version NPM License PRs Welcome Automated Release Notes by gren

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

el-data-tree-crud.gif

中文文档

Table of Contents

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

el-data-tree-search.png

  • Create

el-data-tree-add.png

  • Update

el-data-tree-modify.png

  • Delete

el-data-tree-delete.png

⬆ 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

⬆ Back to Top

Pre Install

This component peerDependencies on element-ui and @femessage/el-form-renderer and axios
make 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

Alvin
Alvin

💻 📖 💡
levy
levy

👀 🌍
Cold Stone
Cold Stone

💻
EVILLT
EVILLT

💻 🚧
Donald Shen
Donald Shen

📖 🚧
ColMugX
ColMugX

🚧
OuZuYu
OuZuYu

🐛

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

⬆ Back to Top

License

MIT

⬆ Back to Top