Nightmare Prom Memories

    This package has been deprecated

    Author message:

    From now on(1.6.2), el-data-table rename to @femessage/el-data-table, for the next new features and bug fixes, you'd better install new package: yarn add @femessage/el-data-table

    el-data-table

    1.6.1 • Public • Published

    el-data-table

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

    使用axios自动发送请求,支持树形结构,支持分页,支持自定义查询, 自定义操作列, 让 RESTful 风格的 CRUD 更简单 👏

    English

    Table of Contents

    Introduction

    CRUD

    el-data-table 就是为了解决业务问题而生的,故而封装了 CRUD 的逻辑在里面。

    以用户接口示例,设其相对路径为:

    /api/v1/users

    则其 restful CRUD 接口如下:

    • 查询
    GET /api/v1/users?page=1&size=10
    • 新增
    POST /api/v1/users
    • 修改(编辑)
    PUT /api/v1/users/:id
    • 删除
    DELETE /api/v1/users/:id

    则只需要使用以下代码,即可完成 CRUD 功能

    <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>

    效果如下:

    • 查询

    • 新增

    • 修改

    • 删除

    ⬆ Back to Top

    数据驱动

    把 template 的内容移动到 script 中, 意味着 template 可以精简,js 可以抽取出来,方便复用;同时,js 里的数据其实就是一段 json,这也让代码生成工具有了用武之地。

    其中表单的渲染使用到了组件@femessage/el-form-renderer

    ⬆ Back to Top

    Why

    为什么要在 element-ui 的 el-table 的基础上封装一个 el-data-table?

    我常听到有以下几种声音:

    1. el-table 已可以覆盖大部分场景,暂无扩展需求
    2. 封装了这么多东西,耦合太严重了
    3. 涉及过多的业务逻辑,有点僵化,业务操作还是交给开发者去处理

    首先 el-table 的确很灵活,只不过,在实现分页请求的时候,仅有 el-table 还不够,还需要组合 el-pagination 组件来实现。而分页处理的内容大多都是重复的,如果不封装,只会产生冗余的代码。

    而中后台太多都是 CRUD 的操作,结合 restful API,使用得只传一个 url 让组件做 CRUD 成为了可能。

    其次,很多有经验的“老手”觉得组件越灵活越好。

    但对于经验尚浅的“新手”,他们并不熟悉常见的业务场景,对一些基本操作,如果表单校验,空格过滤,添加 loading,异常处理,他们只会漏掉,而这正是产生 bug 的源头。

    对于一线的业务开发人员而言,面对做不完的业务,其实他们并不想去处理重复的业务逻辑,他们只想解放双手,早点下班。

    正是在这样的背景下,产生了 el-data-table。

    ⬆ Back to Top

    Feature

    • 只需进行 json 配置,即可实现 restful 风格的 CRUD 四个接口的对接
    • 支持表格内展示树形结构数据(该功能 element-ui 官方是不支持的)
    • 自带分页逻辑
    • 可扩展自定义列按钮,以及自定义操作函数
    • 支持分页查询后,点击详情再返回,恢复上一次的查询状态

    ⬆ Back to Top

    Demo

    ⬆ Back to Top

    Install

    encourage using yarn to install

    yarn add 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 '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

    License

    MIT

    ⬆ Back to Top

    Contributors

    Thanks goes to these wonderful people (emoji key):

    levy
    levy

    💻 👀 📖 🚇 🤔
    Donald Shen
    Donald Shen

    💻 ⚠️ 📖
    MiffyCooper
    MiffyCooper

    💻 📖
    Huanfeng Chen
    Huanfeng Chen

    💻
    EVILLT
    EVILLT

    💻 🐛
    Alvin
    Alvin

    💻 🐛
    Han
    Han

    💻 🐛
    kunzhijia
    kunzhijia

    💻 🔧 💡
    Edgar
    Edgar

    💻 🐛
    Barretem
    Barretem

    💻
    阿禹。
    阿禹。

    📖
    lujunwei
    lujunwei

    💻
    cjf
    cjf

    🐛
    Jack-rainbow
    Jack-rainbow

    🐛
    ColMugX
    ColMugX

    💻

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

    Install

    npm i el-data-table

    DownloadsWeekly Downloads

    11

    Version

    1.6.1

    License

    MIT

    Unpacked Size

    787 kB

    Total Files

    14

    Last publish

    Collaborators

    • levy9527