element el-form 样式
`element-ui`中的`el-form`组件提供了多种样式设置和自定义方式,以下是一些常见的样式设置:
1. label-align 属性可以设置标签的对齐方式,可选值为`left`(默认值), `right`, `center`,可通过设置来改变:
```html
<el-form :label-align="center">
</el-form>
```
2. label-width 属性可以设置标签的宽度,可以是数字或者字符串(如'80px'),默认值是`140px`:
```html
<el-form label-width="100px">
</el-form>
```
3. label-position 属性可以设置标签的位置,可选值为`right`(默认值),`left`,`top`,可通过设置来改变:
```html
<el-form label-position="top">
</el-form>
```
4. inline 属性可以设置标签和表单项是否在同一行显示,可通过设置来改变:
```html
<el-form inline>
</el-form>
```
5. size 属性可以设置表单的尺寸,可选值为`medium`(默认值),`small`,`mini`,可通过设置来改变:
```html
<el-form size="small">
</el-form>
```position标签属性
6. status-icon 属性可以设置表单校验时是否显示图标,可通过设置来改变:
```html
<el-form status-icon>
</el-form>
```
7. validate-on-rule-change 属性可以设置是否在规则改变时立即校验表单,可通过设置来改变:
```html
<el-form validate-on-rule-change>
</el-form>
```
以上是一些常见的样式设置,你可以根据自己的需求来设置其他属性和自定义样式。同时,`el-form`组件也提供了一些可用的插槽,如`label` 插槽和`default` 插槽,这些插槽可以用来自定义表单项的标签和表单项的内容。例如:
```html
<el-form>
<el-form-item label="Username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="Password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">Login</el-button>
</el-form-item>
</el-form>
```
可以通过`label`属性来设置表单项的标签,也可以使用`label`插槽来自定义表单项的标签,例如:
```html
<el-form>
<el-form-item>
<template #label>
<span >*</span> Username
</template>
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item>
<template #label>
<span >*</span> Password
</template>
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">Login</el-button>
</el-form-item>
</el-form>
```
可以通过`default`插槽来自定义表单项的内容,例如:
```html
<el-form>
<el-form-item>
<template #label>
<span >*</span> Username
</template>
<template #default>
<el-input v-model="form.username"></el-input>
<span>Input your username here</span>
</template>
</el-form-item>
<el-form-item>
<template #label>
<span >*</span> Password
</template>
<template #default>
<el-input type="password" v-model="form.password"></el-input>
<span>Input your password here</span>
</template>
</el-form-item>
<el-form-item>
<el-button type="primary">Login</el-button>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论