el-form:表单容器 是Element Plus中的表单组件,用于包裹整个表单内容。它的主要作用是提供表单的整体布局和功能支持, 例如表单验证、数据绑定。 label-width设置表单字段的标签宽度为100像素。 :model="searchParams"将表单的model属性绑定到Vue实例中的searchParams数据对象中。 :rules="searchFormRules"
el-row:栅格布局的行容器 是Element Plus中的栅格布局组件,用于创建一行布局。它通过gutter属性设置列与列之间的间距。 :gutter="20":设置类之间的间距为20像素。这个间距会均匀分配到每列的左右两侧。
: 栅格布局的列容器 是Element Plus中的栅格布局组件,用于创建列。它通过span属性设置列的宽度比例。 :span="6":设置当前列的宽度比例为6。在Element Plus的栅格系统中,一行总共有24格,span="6" 表示当前占据6格,即一行的四分之一。
el-form-item:表单字段容器 label="数据库":设置表单字段的标签文本为“数据库“ prop=“databaseNames”:将当前表单字段与searchParams对象中的databaseNames属性关联
表单被分为4列,每列占据一行的四分之一 用于显示表单字段的标签和输入框。 表单字段值通过v-model与searchParams中的属性绑定 表单字段的验证规则通过prop与saerchFormRules中的规则关联。
<el-select v-model="searchParams.sourceType" placeholder="请选择同步类型" clearable filterable allow-create default-first-option
1.v-model 2.placeholder 3.clearable 4.filterable 属性用于指定是否可以对选项进行搜索过滤 5.allow-create 属性用于指定是否允许用户创建新选项 6.default-first-option 属性用于指定是否默认选中第一个匹配的选项