基于Vue2.x, element-ui 2.x，以及開源組件el-form-renderer封裝了一個業務組件el-data-table，已在github開源，其目標是：makes restful api crud easily

特點：

1. 使用axios自動發送請求

2.自帶新增/修改/刪除邏輯(默認新增/修改都是彈窗表單形式)

3.封裝了拼接query查詢邏輯，只需配置搜索表單即可進行GET請求查詢

4.可擴展自定義列按鈕

5.自帶分頁邏輯

6.支持樹形結構數據(眾所周知，該功能element-ui官方是不支持的)

el-data-table整體結構圖

樹形結構示例圖

普通查詢示例

日期查詢示例

新增彈窗示例

修改彈窗示例

多選刪除示例

單行刪除示例

特殊查詢示例

自定義彈窗示例

后臺接口約定

以用戶接口示例，設其相對路徑為:

/api/v1/users

1. 新增

POST /api/v1/users

2. 修改

PUT /api/v1/users/:id

3. 分頁查詢

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

其中page與size參數可設置

4. 刪除

DELETE /api/v1/users/:id

5. 批量刪除

DELETE /api/v1/users/:id1, :id2

適用場景

基于element-ui的應用

---

更多代碼示例，請上github

github地址：https://github.com/FEMessage/el-data-table

npm地址：https://www.npmjs.com/package/el-data-table

我的博客：https://github.com/levy9527/blog

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的element table 怎么知道点击的是第几行_el-data-table, 让CRUD更简单??的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。