@femessage/el-data-table
    TypeScript icon, indicating that this package has built-in type declarations

    1.23.0 • Public • Published

    el-data-table

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

    Auto requesting by axios, supports pagination, tree data structure, custom search, custom operation column, which makes rest api easily👏

    The table uses @femessage/el-form-renderer to render form.

    中文文档

    Table of Contents

    Introduction

    CRUD

    el-data-table 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?page=1&size=10

    default data structure

    {
      "code":0,
      "msg":"ok",
      "payload":{
        "content":[], // dataPath
        "totalElements":2, // totalPath
      }
    }

    You can customize dataPath/totalPath.

    If hasPagination=false, default dataPath is payload

    • 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-table v-bind="tableConfig"></el-data-table>
    </template>
    <script>
    export default {
      data() {
        return {
          tableConfig: {
            url: '/example/users',
            columns: [
              {
                prop: 'name',
                label: '用户名'
              }
            ],
            searchForm: [
              {
                type: 'input',
                id: 'name',
                label: '用户名',
                el: {
                  placeholder: '请输入'
                }
              }
            ],
            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

    Data Driven

    Moving the content of the template to the script means that the template can be reduced and js can be extracted to another file to reuse. At the same time, the data in js is actually a piece of json, this means code generation tool can help.



    9.jpeg

    Back to Top

    Why

    Why do you create el-data-table based on el-table of element-ui?

    I often hear the following sounds:

    1. el-table can cover most scenarios without extended requirements
    2. wrap up so many things, it's heavy and high coupling
    3. bound with too many business logic, it's not flexible; business logic should handle by developers

    First of all, I have to say, el-table is really flexible, but when implementing paging requests, only el-table is not enough, and the el-pagination component needs to be combined. Most of the content of paging processing is repeated. Without a high level business component, we get duplicate code everywhere.

    In fact, in the admin or dashboard web app, there are many CRUD operations, using restful API. It is possible to use only one url to make a component to complete CRUD functions.

    Secondly, many experienced developers think that components are the more flexible the better.

    However, for the "newbees" who lack of experience, they are not familiar with common business scenarios. Some basic operations, like form validation, space filtering, adding loading, exception handling, they may forget, which result in bugs.

    For front-line business developers, in the face of endless developing task, in fact, they don't want to deal with repeated business logic. they just want to free their hands and get off work early.

    In such situation, el-data-table was born.

    Back to Top

    Feature

    • Use configuration to call restful api to complete CRUD functions
    • Support table display tree structure data
    • Bound with pagination logic
    • Support custom column buttons, and custom operation functions
    • Support saving query on url, which can resotre search status after history.go(-1) or location.reload()

    Back to Top

    Links

    Back to Top

    Install

    Encourage using Yarn to install

    yarn add @femessage/el-data-table

    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 ElDataTable from '@femessage/el-data-table'
    import ElFormRenderer from '@femessage/el-form-renderer'
    import {
      Button,
      Dialog,
      Form,
      FormItem,
      Loading,
      Pagination,
      Table,
      TableColumn,
      Message,
      MessageBox
    } from 'element-ui'
    Vue.use(Button)
    Vue.use(Dialog)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Loading.directive)
    Vue.use(Pagination)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.component('el-form-renderer', ElFormRenderer)
    Vue.component('el-data-table', ElDataTable)
    // to show confirm before delete
    Vue.prototype.$confirm = MessageBox.confirm
    // show tips
    Vue.prototype.$message = Message
    // if the table component cannot access `this.$axios`, it cannot send request
    import axios from 'axios'
    Vue.prototype.$axios = axios

    Template

    <template>
      <el-data-table></el-data-table>
    </template>

    Back to Top

    Reference

    Back to Top

    Contributing

    For those who are interested in contributing to this project, such as:

    • report a bug
    • request new feature
    • fix a bug
    • implement a new feature

    Please refer to our contributing guide.

    Back to Top

    Contributors

    Thanks goes to these wonderful people (emoji key):


    levy

    💻 👀 📖 🚇 🤔

    Donald Shen

    💻 ⚠️ 📖

    MiffyCooper

    💻 📖

    Huanfeng Chen

    💻

    EVILLT

    💻 🐛

    Alvin

    💻 🐛

    Han

    💻 🐛 📖

    kunzhijia

    💻 🔧 💡

    Edgar

    💻 🐛

    Barretem

    💻

    阿禹。

    📖

    lujunwei

    💻

    cjf

    🐛 💻

    Jack-rainbow

    🐛

    ColMugX

    💻

    snowlocked

    💻 📖

    Sponge

    🐛 💻

    4Ark

    💻 📖

    Htongbing

    💻

    PPPenny

    💻

    PopupDialog

    🐛

    Jogiter

    💻

    yolofit

    🐛

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

    License

    MIT

    Back to Top

    Install

    npm i @femessage/el-data-table

    DownloadsWeekly Downloads

    273

    Version

    1.23.0

    License

    MIT

    Unpacked Size

    330 kB

    Total Files

    20

    Last publish

    Collaborators

    • levy9527