表格組件 · Saber開發手冊

## 表格組件 * 組件文檔：[https://avuejs.com/doc/crud/crud-doc](https://avuejs.com/doc/crud/crud-doc) * 可以看到，官網的組件文檔非常全，查看對應例子 ![](https://img.kancloud.cn/5b/58/5b58139bc205881bf336ef7abdd8a2c0_2532x1618.png) ![](https://img.kancloud.cn/86/49/8649fd286470cb0d2841742803f93e21_3838x1882.png) ![](https://img.kancloud.cn/c4/63/c4636c4a340544fb0442bb3033170b11_3838x1886.png) * 找一個基礎的demo，進行集成 ![](https://img.kancloud.cn/37/96/37960142e5fc907b24d2f8d1b8394e19_3828x1878.png) * 將代碼拷貝至最開始的demo.vue文件 ![](https://img.kancloud.cn/03/9e/039e5043223639bd16a4bcce87a780e5_1238x1902.png) * 刷新頁面查看效果，發現已經完整展現了crud功能 ![](https://img.kancloud.cn/85/95/8595a93ce5f4e93e3a025bb9c00e77ed_2610x788.png) ![](https://img.kancloud.cn/49/24/4924b36f6c9f3d55d57ffeb7b3725f71_2126x1324.png) ![](https://img.kancloud.cn/01/5c/015ceb4d7619d59c7760416429c6be1a_1868x1280.png) ![](https://img.kancloud.cn/2a/87/2a8728c28bdd930f58ae661ff84a22ba_2130x1392.png) ![](https://img.kancloud.cn/b0/bd/b0bd24c1ade2121ce1d18a5b3b8bcc7d_1836x734.png) * 有些情況，默認的配置無法滿足我們的要求，比需要給字典項加上背景來突出顯示，這時候我們可以通過卡槽來定義 ![](https://img.kancloud.cn/3d/c1/3dc1e3b3de380396851d3369f1a14f80_1280x1632.png) * 再次刷新頁面，發現表格的自定義卡槽生效（表單的自定義卡槽將在下一章介紹） ![](https://img.kancloud.cn/9c/84/9c84d455fe31a387f1cb4a329bd3e24e_2474x824.png) * 與之前的ElementUI原生寫法相對比，avue的方式為我們省了很多精力。幾乎所有的操作都使用json驅動配置就能實現我們想要的效果 * 具體的配置，我們可以查看文檔與例子進行拓展：[https://avuejs.com/doc/crud/crud-doc](https://avuejs.com/doc/crud/crud-doc)