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小时内删除。