el data table

El-Data-table

axios的自動請求，支持分頁，樹數據結構，自定義搜索，自定義操作列，這使REST API容易？

該表使用 @femessage/el-form-renderer呈現形式。

中文文檔

目錄

• 介紹
  • 克魯德
  • 數據驅動
  • 為什麼
• 特徵
• 鏈接
• 安裝
• 快速開始
  • 全局寄存器組件
  • 模板
• 參考
• 貢獻
• 貢獻者
• 執照

介紹

克魯德

創建El-Data-Table是為了解決業務問題，因此在內部設置了Crud邏輯。
例如，要開發user API，請假設其相對路徑如下：

 / api / v1 / users

寧靜的crud api應該是：

• 取回

 GET / api / v1 / users ? page = 1 & size = 10

默認數據結構

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

您可以自定義DataPath/TotalPath。

如果hasPagination=false ，則默認數據索是payload

• 創造

 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 >

結果如下：

• 取回
  

• 創造

• 更新

• 刪除

⬆返回到頂部

數據驅動

將模板的內容移至腳本意味著可以減少模板，並將JS提取到另一個文件以重複使用。同時，JS中的數據實際上是JSON的一部分，這意味著代碼生成工具可以提供幫助。

⬆返回到頂部

為什麼

為什麼要基於El-Data-table創建El-data-table？

我經常聽到以下聲音：

1. El-Table可以涵蓋大多數情況而無需擴展要求
2. 總結了很多事情，它是沉重而高的耦合
3. 與太多的業務邏輯結合，這不是靈活的。開發人員應處理業務邏輯

首先，我不得不說，El-Table確實很靈活，但是在實施分頁請求時，只有El-Table不夠，並且需要組合El-Pagination組件。重複分頁處理的大多數內容。沒有高級業務組件，我們到處都可以重複代碼。

實際上，在管理員或儀表板網絡應用程序中，使用RESTFUL API有許多CRUD操作。只能僅使用一個URL製作一個組件來完成CRUD功能。

其次，許多經驗豐富的開發人員認為，組件的靈活性越大越好。

但是，對於缺乏經驗的“新手”，他們不熟悉常見的業務場景。一些基本操作，例如形式驗證，空間過濾，添加加載，異常處理，它們可能會忘記，這會導致錯誤。

對於前線業務開發人員，面對無窮無盡的任務，實際上，他們不想處理重複的業務邏輯。他們只想釋放雙手並儘早下班。

在這種情況下，El-Data-Table誕生了。

⬆返回到頂部

特徵

• 使用配置調用RESTFUL API完成CRUD功能
• 支持表顯示樹結構數據
• 與分頁邏輯結合
• 支持自定義列按鈕和自定義操作功能
• 支持在URL上保存查詢，該查詢可以在歷史悠久後搜索搜索狀態。

⬆返回到頂部

鏈接

• 文件
• fem-vscode-helper

⬆回到頂部

安裝

鼓勵使用紗線安裝

yarn add @femessage/el-data-table

⬆返回到頂部

快速開始

全局寄存器組件

這是出於降低的原因：以這種方式構建您的應用程序，WebPack或其他Bundler只是將依賴項捆綁到一個使用此組件的所有頁面中，而不是一個供應商，而不是一個頁面

 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 >
  < el-data-table ></ el-data-table >
</ template >

⬆返回到頂部

參考

• 形式規則詳細信息請參閱異步佛羅里達律師
• 輸入輸入以提交
• html規格表單提交
• what_is_a_url
• 歷史_api
• Encodeuricomponent
• REGEXP
• 路由實現詳細信息在Vue-Router中
• 同行依賴性

⬆返回到頂部

貢獻

對於那些有興趣為該項目做出貢獻的人，例如：

• 報告一個錯誤
• 請求新功能
• 修復錯誤
• 實施新功能

請參閱我們的貢獻指南。

⬆回到頂部

貢獻者

謝謝這些好人（表情符號鑰匙）：

徵收 ？ ？ ？	唐納德·沉 配x	Miffycooper	Huanfeng Chen	evillt ？	阿爾文 ？	漢 ？
Kunzhijia ？	埃德加 ？	票	阿禹。	Lujunwei	CJF ？	傑克·拉恩弓 ？
Colmugx	雪鎖	海綿 ？	4ark	htongbing	Pppenny	彈出式 ？
喬吉特	yolofit ？	Huazaili ？

該項目遵循全企業規範。歡迎任何形式的貢獻！

執照

麻省理工學院

⬆返回到頂部