## 分页布局

### 基本用法

分页布局可以提供多个分页区域来放置内容，始终只有一个分页区域处于显示状态，其他分页区域处于隐藏状态，通过`上一步`，`下一步`按钮在多个分页区域之间切换。

```html
<template>
  <el-form label-width="100px">
    <cl-steps
      :columns="[
        { name: '基本信息' },
        { name: '更多信息' },
        { name: '扩展信息' },
      ]"
    >
      <cl-step-layout :pageIndex="0">
        <cl-h2>基本信息</cl-h2>
      </cl-step-layout>
      <cl-step-layout :pageIndex="1">
        <cl-h2>更多信息</cl-h2>
      </cl-step-layout>
      <cl-step-layout :pageIndex="2">
        <cl-h2>扩展信息</cl-h2>
      </cl-step-layout>
      <cl-step :page-size="3" />
    </cl-steps>
  </el-form>
</template>

<!-- step-1.vue -->
```

### 区域校验

多个分页区域在切换时，先对当前区域进行校验，未通过校验时不会切换区域。

```html
<template>
  <el-form label-width="180px">
    <cl-steps
      :columns="[
        { name: '基本信息' },
        { name: '更多信息' },
        { name: '更多信息2' },
      ]"
    >
      <cl-step-layout :pageIndex="0">
        <template>
          <cl-form-item label="个人姓名">
            <cl-input v-model="data.grxm" validate="required" />
          </cl-form-item>
          <cl-form-item label="年龄">
            <cl-input v-model="data.age" validate="required" />
          </cl-form-item>
        </template>
      </cl-step-layout>
      <cl-step-layout :pageIndex="1">
        <template>
          <el-row>
            <el-col :span="24">
              <cl-form-item label="性别">
                <cl-input v-model="data.xb" />
              </cl-form-item>
            </el-col>
          </el-row>
        </template>
      </cl-step-layout>
      <cl-step-layout :pageIndex="2">
        <template>
          <el-row>
            <el-col :span="24">
              <cl-form-item label="性格特点">
                <cl-input v-model="data.xgtd" />
              </cl-form-item>
            </el-col>
          </el-row>
        </template>
      </cl-step-layout>
      <cl-step
        is-verify
        :page-size="3"
        :next-button="{
          name: '下一步',
          icon: '',
          color: '#409eff'
        }"
        :back-button="{
          name: '上一步',
          icon: '',
          color: '#67C23A'
        }"
      ></cl-step>
    </cl-steps>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        data: {
          grxm: "",
          age: "",
          xb: "",
          xgtd: "",
        },
      };
    },
  };
</script>

<!-- step-2.vue -->
```

### Steps Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| columns | 分页的数组 | Array | — | — |

### Step Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| page-size  | 总页数      | number | —     | —    |
| back-button     | 上一步按钮 | object        | —     | —    |
| next-button     | 下一步按钮 | object        | —     | —    |
| is-verify     | 是否校验 | boolean        | —     | false    |

### StepLayout Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| page-index | 分页布局的分页索引 | number | — | — |
