## 表格组件 * 组件文档：[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)