el data tree

el 数据树

使用axios自动发送请求，支持过滤，自定义action列，让RESTful CRUD更简单？

中文文档

目录

• 介绍
  • 增删改查
• 特征
• 演示
• 预安装
• 安装
• 快速入门
  • 全局寄存器组件
  • 模板
• 贡献者
• 执照

介绍

增删改查

el-data-tree是为了解决业务问题而创建的，所以里面设置了CRUD逻辑。
例如，开发user api，假设其相对路径如下：

/api/v1/users

Restful CRUD api 应该是：

• 取回

 GET / api / v1 / users ? type = 1

• 创造

 POST / api / v1 / users

• 更新

 PUT / api / v1 / users / : id

• 删除

 DELETE / api / v1 / users / : id

那么只需要使用如下代码即可完成CRUD功能

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

结果如下：

• 取回

• 创造

• 更新

• 删除

⬆ 返回顶部

特征

• 使用配置调用restful api完成CRUD功能
• 支持自定义菜单栏，以及自定义动作功能
• 默认保存expandedKeys，调用create/delete/update接口后不会丢失expandedKeys状态
• 优化节点检查方法

⬆ 返回顶部

演示

• 文档和在线演示

⬆ 返回顶部

预安装

该组件对等依赖于 element-ui 和 @femessage/el-form-renderer 和 axios
确保你已经安装在你的项目中

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

⬆ 返回顶部

安装

鼓励使用yarn安装

yarn add @femessage/el-data-tree

⬆ 返回顶部

快速入门

全局寄存器组件

这是出于缩小的原因：通过这种方式构建您的应用程序、webpack 或其他捆绑器，只需将使用该组件的所有页面的依赖项捆绑到一个供应商中，而不是一个页面的一个供应商中

 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

⬆ 返回顶部

模板

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

⬆ 返回顶部

贡献者

阿尔文

征收 ？ ？

冷石

埃维尔特 ？

唐纳德·沉 ？

科尔马克X ？

欧祖玉 ？

该项目遵循所有贡献者规范。欢迎任何形式的贡献！

⬆ 返回顶部

执照

麻省理工学院

⬆ 返回顶部