## 表单布局 ### 基本用法 ``` html 包年包月 按量付费 1核 1GB 1核 2GB 2核 4GB 4核 8GB 8核 16GB 8核 32GB 16核 64GB SSD 云盘 高性能 SSD 云盘 立即创建 ``` ### 行内 ``` html 认证中 查询 ``` ### 栅格布局 使用栅格布局可以使多行表单对齐美观，设置 `repeat` 划分栅格数量，设置 `span` 占用对应空间。 ``` html 认证中 全部 查询 ``` ### 标签块级布局 ``` html 包年包月 按量付费 查询 认证中 全部 查询 ``` ### 插槽 - 通过`slot="label"`插槽自定义左侧内容 - 通过`slot="description"`插槽自定义描述内容 - 通过`slot='extra'`插槽自定义`label`右侧额外内容 ``` html 用户名
描述描述
 ``` ## 数据收集与提交 推荐将各表单控件使用`v-model`绑定的数据，统一收集到`data`里的`model`对象中。 ``` vue ``` ### 数据转换 有时 UI 中的数据与向后端提交的数据不完全一致，可以将`v-model`分解为一个`:value`属性绑定 + `@input`事件，做临时转换。 对于需要保持数字类型的，可以直接使用 Vue 的 `v-model` 的 `.number` 修饰符。 ``` vue ``` ### 表单验证 需要在``的`rules`属性添加验证规则，输入和失焦会自动触发验证，点击提交按钮时，需要手动调用 form 的`validate`方法。 可以根据`@validate`事件监听表单的验证状态。 关于验证规则的详细使用，参见 [UValidator](#components/u-validator)。 ```vue ```