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 ？

歐祖玉 ？

該項目遵循所有貢獻者規範。歡迎任何形式的貢獻！

⬆ 回到頂部

執照

麻省理工學院

⬆ 回到頂部