表單組件 · Saber開發手冊

## 表單組件 * 組件文檔：[https://avuejs.com/doc/form/form-doc](https://avuejs.com/doc/form/form-doc) * 查看對應例子 ![](https://img.kancloud.cn/a0/5a/a05af4e36d14d4cb07b0679c3e3477a2_3838x1886.png) ![](https://img.kancloud.cn/ac/c9/acc9b49855b611f29f612240aae945cb_3834x1502.png) ![](https://img.kancloud.cn/6c/4f/6c4fb11e073d28ffd8b02bc84bf27d49_3838x1860.png) * 找一個基礎的demo，進行集成 ![](https://img.kancloud.cn/4a/f3/4af348300bae9b833257a65c520b8aea_3838x1856.png) * 將代碼拷貝至最開始的demo.vue文件 ![](https://img.kancloud.cn/13/3a/133a0604d061a9199ef74d744ba4d4fd_1504x1808.png) * 刷新頁面點擊提交，發現表單數據獲取成功 ![](https://img.kancloud.cn/92/99/9299a4214146b44ff939acf252a49c1b_2150x1156.png) * 由此可見，avue的表格、表單組件都只需要配置`option`，便可以渲染出各種我們所需要的效果。若某些情況不支持，我們也可以使用slot卡槽進行配置。 * 在column中配置formslot屬性，同時在<avue-form>標簽內配置template卡槽，`column`的`prop`需要與卡槽的`slot`對應 ![](https://img.kancloud.cn/cb/ee/cbee441a63f852098480e2f27dd87390_1342x1388.png) * 刷新頁面發現卡槽定義成功 ![](https://img.kancloud.cn/7f/dd/7fdd7cb67c1a89e39037a01f803073b3_2006x1194.png) * 這樣一來，大家便可以通過卡槽來配置出各種復雜場景的組件了