## 表单

### 全部控件

```html
<template>
  <el-radio-group v-model="display" size="small" style="margin-bottom: 20px">
    <el-radio-button label="block">块模式</el-radio-button>
    <el-radio-button label="inline">行内模式</el-radio-button>
  </el-radio-group>
  <br />
  <el-radio-group v-model="labelPosition" size="small" style="margin-bottom: 20px">
    <el-radio-button label="left">左对齐</el-radio-button>
    <el-radio-button label="right">右对齐</el-radio-button>
    <el-radio-button label="center">中部对齐</el-radio-button>
    <el-radio-button label="justify">平均分布</el-radio-button>
  </el-radio-group>
  <el-form :model="formData" label-width="120px" data-vv-scope="formAll" v-form="{ inputsDisplay: display, formItemAlign: labelPosition }">
    <cl-form-item label="单行文本">
      <cl-input v-model="formData.dhwb" validate="required"></cl-input>
    </cl-form-item>
    <cl-form-item label="用户选择器">
      <cl-user-selector-input v-model="formData.username" select-current single></cl-user-selector-input>
    </cl-form-item>
    <cl-form-item label="组织选择器">
      <cl-org-selector-input v-model="formData.orgname" select-current single></cl-org-selector-input>
    </cl-form-item>
    <cl-form-item label="角色选择器">
      <cl-role-selector-input v-model="formData.rolename" single></cl-role-selector-input>
    </cl-form-item>
    <cl-form-item label="岗位选择器">
      <cl-post-selector-input v-model="formData.postname" select-current single></cl-post-selector-input>
    </cl-form-item>
    <cl-form-item label="职务选择器">
      <cl-job-selector-input v-model="formData.jobname" select-current single></cl-job-selector-input>
    </cl-form-item>
    <cl-form-item label="数字">
      <cl-input type="number" v-model="formData.sz" validate="required"></cl-input>
    </cl-form-item>
    <cl-form-item label="单选框">
      <cl-radio
        v-model="formData.dxk"
        validate="required"
        :options="[
          { key: '1', value: '男士' },
          { key: '2', value: '女士' },
          { key: '3', value: '未知' },
        ]"
      />
    </cl-form-item>
    <cl-form-item label="多选框">
      <cl-checkbox
        v-model="formData.fxk"
        validate="required"
        :options="[
          { key: '1', value: '唱歌' },
          { key: '2', value: '跳舞' },
          { key: '3', value: '吃火锅' },
          { key: '4', value: '打豆豆' },
        ]"
      />
    </cl-form-item>
    <cl-form-item label="下拉框">
      <cl-select
        v-model="formData.xlk"
        validate="required"
        :options="[
          {
            key: '职业',
            value: '职业',
            children: [
              { key: '1', value: '医生' },
              { key: '2', value: '护士' },
            ],
          },
          {
            key: '水果',
            value: '水果',
            children: [
              { key: 'a', value: '苹果' },
              { key: 'b', value: '香蕉' },
            ],
          },
        ]"
      ></cl-select>
    </cl-form-item>
    <cl-form-item label="日期">
      <cl-date v-model="formData.rq" validate="required"></cl-date>
    </cl-form-item>
    <cl-form-item label="日期时间范围">
      <cl-date-picker v-model="formData.rqrg" validate="required" />
    </cl-form-item>
    <cl-form-item label="日期范围">
      <cl-date-picker v-model="formData.rqsjrg" format="yyyy-MM-dd" value-format="yyyy-MM-dd" validate="required" />
    </cl-form-item>
    <cl-form-item label="时间">
      <cl-time-select v-model="formData.sj" validate="required"></cl-time-select>
    </cl-form-item>
    <cl-form-item label="时间范围">
      <cl-time-picker
        is-range
        v-model="formData.sjfw"
        validate="required"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      ></cl-time-picker>
    </cl-form-item>
    <cl-form-item label="多行文本">
      <cl-input v-model="formData.mhwb" type="textarea" validate="required" />
    </cl-form-item>
    <cl-form-item label="列表附件">
      <cl-file v-model="formData.fj1" type="list" validate="required" />
    </cl-form-item>
    <cl-form-item label="表格附件">
      <cl-file v-model="formData.fj2" type="table" validate="required" />
    </cl-form-item>
    <cl-form-item label="图片墙附件">
      <cl-file v-model="formData.fj3" type="card" validate="required" />
    </cl-form-item>
    <cl-form-item label="时长">
      <cl-duration v-model="formData.sc" validate="required"></cl-duration>
    </cl-form-item>
    <cl-form-item label="输入建议">
      <cl-autocomplete
        name="输入建议"
        v-model="formData.srjy"
        validate="required"
        :ganged="{
          alias: 'zzyh',
          valueBind: 'FULLNAME_',
          noInit: '',
          labelBind: '',
          gangedBind: '{}',
          bind: {},
        }"
      ></cl-autocomplete>
    </cl-form-item>
    <cl-form-item label="级联">
      <cl-cascader
        v-model="formData.jl"
        validate="required"
        :ganged="{
          alias: 'gss',
          valueBind: 'Id',
          labelBind: 'Name',
          gangedBind: '{}',
          bind: { Pid: { key: 'Id', default: '0' }, Id: '' },
        }"
      ></cl-cascader>
    </cl-form-item>
    <cl-form-item label="数据字典">
      <cl-dictionary v-model="formData.sjzd" dickey="xmlx" validate="required" filterable />
    </cl-form-item>
    <cl-form-item label="富文本">
      <cl-editor v-model="formData.fwb" encode validate="required"></cl-editor>
    </cl-form-item>
    <cl-form-item>
      <el-button type="primary" @click="onSubmit" :loading="loading"> 提交 </el-button>
      <el-button>取消</el-button>
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        display: 'inline',
        labelPosition: 'right',
        formData: {
          dhwb: '',
          username: '',
          orgname: '',
          rolename: '',
          postname: '',
          jobname: '',
          sz: '',
          dxk: '',
          fxk: '',
          xlk: '',
          rq: '',
          rqrg: '',
          rqsjrg: '',
          sj: '',
          sjfw: '',
          mhwb: '',
          fwb: '',
          fj1: '',
          fj2: '',
          fj3: '',
          sc: '',
          srjy: '',
          jl: '',
          sjzd: ''
        },
        loading: false
      }
    },
    methods: {
      onSubmit() {
        this.loading = true
        setTimeout(() => {
          utils
            .validateForm(this, 'formAll')
            .then((r) => {
              this.$message.success(JSON.stringify(this.formData))
            })
            .catch((items) => {
              this.$message.error(`有${items.length}个字段未通过校验，请正确填写表单内容。`)
            })
            .finally(() => {
              this.loading = false
            })
        }, 500)
      }
    }
  }
</script>

<!-- form-all.vue -->
```

### 基础用法

可使用`label`属性和`slot`插槽定义`label`显示内容。

```html
<template>
  <el-form ref="form" :model="form">
    <cl-form-item label="普通label">
      <cl-input v-model="inputVal1" />
    </cl-form-item>
    <cl-form-item>
      <span slot="label">slot文本</span>
      <cl-input v-model="inputVal1" />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        inputVal1: '',
        form: {}
      }
    }
  }
</script>
<!-- form-1.vue -->
```

### 对齐方式

通过`v-form="{formItemAlign: 'left'}"`可以控制整个表单的标签对齐方式，通过`cl-form-item`上的`align`属性控制单个标签的对齐方式。

```html
<template>
  <el-radio-group v-model="labelPosition" size="small" style="margin-bottom:20px;">
    <el-radio-button label="left">左对齐</el-radio-button>
    <el-radio-button label="right">右对齐</el-radio-button>
    <el-radio-button label="center">中部对齐</el-radio-button>
    <el-radio-button label="justify">平均分布</el-radio-button>
  </el-radio-group>
  <el-form ref="form" :model="form" v-form="{formItemAlign: labelPosition}">
    <cl-form-item label="名称(始终居左)" align="left">
      <cl-input v-model="inputVal1" />
    </cl-form-item>
    <cl-form-item label="活动区域">
      <cl-input v-model="inputVal2" />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        inputVal1: '',
        inputVal2: '',
        labelPosition: 'left',
        form: {}
      }
    }
  }
</script>
<!-- form-2.vue -->
```

### label 颜色

通过`label-color`控制`label`颜色。

```html
<template>
  <el-form ref="form" :model="form">
    <cl-form-item label="名称" label-color="blue">
      <cl-input v-model="inputVal1" />
    </cl-form-item>
    <cl-form-item label="活动区域" label-color="#e4393c">
      <cl-input v-model="inputVal2" />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        inputVal1: '',
        inputVal2: '',
        form: {}
      }
    }
  }
</script>
<!-- form-3.vue -->
```

### label 宽度

通过`label-width`控制`label`宽度，优先使用`cl-form-item`组件上配置的`label-width`属性，没有配置时获取`el-form`上的配置，均未配置时默认为`100px`。

```html
<template>
  <el-form ref="form" :model="form" :label-width="labelWidth">
    <cl-form-item label="标签宽度">
      <cl-input v-model="labelWidth" />
    </cl-form-item>
    <cl-form-item label="名称" label-width="80px">
      <cl-input v-model="form.inputVal1" />
    </cl-form-item>
    <cl-form-item label="活动区域">
      <cl-input v-model="form.inputVal2" />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        labelWidth: '120px',
        form: {
          inputVal1: '',
          inputVal2: ''
        }
      }
    }
  }
</script>
<!-- form-4.vue -->
```

### label 是否显示`:`号

通过添加`custom-colon`属性隐藏":"号。

```html
<template>
  <el-form ref="form" :model="form">
    <cl-form-item label="默认有冒号">
      <cl-input v-model="inputVal1" />
    </cl-form-item>
    <cl-form-item label="无冒号" custom-colon>
      <cl-input v-model="inputVal1" />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        inputVal1: '',
        inputVal2: '',
        form: {}
      }
    }
  }
</script>
<!-- form-5.vue -->
```

### 校验表单

1.在使用表单录入数据时，需要对表单中的所有校验字段进行校验，通过校验后才允许提交数据 2.使用 data-vv-scope="form1"来标记当前表单，在进行表单校验时，可以指定 form1 来验证指定作用域内的校验结果，避免同一个页面中具有多个表单时交叉校验的问题。另外 v-form 指令用于标记当前表单，实现表单内的数学计算时多个字段相互计算的需求。

```html
<template>
  <el-form :model="formData" label-width="80px" data-vv-scope="form1" v-form>
    <cl-form-item label="姓名">
      <cl-input v-model="formData.name" validate="required|min:2|max:4"></cl-input>
    </cl-form-item>
    <cl-form-item label="年龄">
      <cl-input type="number" v-model="formData.age" validate="required"></cl-input>
    </cl-form-item>
    <cl-form-item label="性别">
      <cl-radio
        v-model="formData.sex"
        validate="required"
        :options="[
          { key: '1', value: '男士' },
          { key: '2', value: '女士' },
        ]"
      />
    </cl-form-item>
    <cl-form-item label="爱好">
      <cl-checkbox
        v-model="formData.hobby"
        validate="required"
        :options="[
          { key: '1', value: '唱歌' },
          { key: '2', value: '跳舞' },
          { key: '3', value: '吃火锅' },
        ]"
      />
    </cl-form-item>
    <cl-form-item>
      <el-button type="primary" @click="onSubmit" :loading="loading"> 提交 </el-button>
      <el-button>取消</el-button>
    </cl-form-item>
  </el-form>
</template>
<script>
  // 此处demo中这样引入工具方法 utils，实际项目中引入路径为 import utils from "swordpaas-ui/src/utils.js"
  import utils from '../../src/utils'
  export default {
    data() {
      return {
        formData: {
          name: '',
          age: '',
          sex: ''
        },
        loading: false
      }
    },
    methods: {
      onSubmit() {
        this.loading = true
        setTimeout(() => {
          utils
            .validateForm(this, 'form1')
            .then((r) => {
              this.$message.success(JSON.stringify(this.formData))
            })
            .catch((items) => {
              this.$message.error(`有${items.length}个字段未通过校验，请正确填写表单内容。`)
            })
            .finally(() => {
              this.loading = false
            })
        }, 500)
      }
    }
  }
</script>

<!-- validate-form.vue -->
```

### 属性说明

| 属性         | 类型    | 默认值 | 说明                                                                                                     |
| :----------- | :------ | :----- | :------------------------------------------------------------------------------------------------------- |
| label        | string  | -      | 标签文本                                                                                                 |
| align        | string  | -      | 标签位置,可选值'left', 'center', 'right', 'justify'                                                      |
| label-color  | string  | -      | 标签颜色                                                                                                 |
| label-width  | string  | 100px  | 标签宽度                                                                                                 |
| custom-colon | boolean | false  | label 标签是否隐藏冒号                                                                                   |
| required     | boolean | false  | 是否添加必填的标识（注意：默认不需要设置该属性，`ClFormItem`会根据包含的组件是否必填来自动添加必填标识） |

### `v-form`属性说明

| 属性          | 类型   | 默认值   | 说明                                                                                             |
| :------------ | :----- | :------- | :----------------------------------------------------------------------------------------------- |
| inputsDisplay | string | `inline` | 表单中的控件是以默认宽度还是占满所在区域显示，可选值有`block`：占满所在区域,`inline`：默认宽度。 |
| formItemAlign | string | -        | 表单内的标签位置，单个控件未设置时以应用表单设置，可选值'left', 'center', 'right', 'justify'     |
