PmStepForm

基础用法

默认

卡片

默认 卡片

<el-radio-group class="mb-20" v-model="simple">
  <el-radio-button :label="false">默认</el-radio-button>
  <el-radio-button :label="true">卡片</el-radio-button>
</el-radio-group>

<pm-step-form align-center :simple="simple" :config="config" bodyStyle="height: 200px" @save="save">
  <el-form slot="step1" class="m-20" :rules="rules" :model="user" label-position="top">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="user.name"/>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input-number :min="10" v-model="user.age"/>
    </el-form-item>
  </el-form>
  <el-form slot="step2" class="m-20" :rules="rules" :model="user" label-position="top">
    <el-form-item label="电话号码" prop="mobile">
      <el-input v-model="user.mobile"/>
    </el-form-item>
      <el-form-item label="住址" prop="address">
      <el-input type="textarea" :rows="3" v-model="user.address"/>
    </el-form-item>
  </el-form>
</pm-step-form>

<script>
export default {
  data () {
    return {
      user: {
        name: null,
        age: 10,
      },
      rules:{
        name:[{required:true, message:'姓名不能为空!'}],
        mobile:[{required:true, message:'电话号码不能为空!'}],
      },
      simple: false,
      config: {
        steps: [{
          key: 'step1',
          label: '步骤一',
          icon:'el-icon-edit',
          description:'第一个表单'
        },
        {
          key: 'step2',
          label: '步骤二',
          icon:'el-icon-user',
          description:'第二个表单'
        }]
      }
    }
  },
   methods: {
      save() {
        alert('click save')
      }
    }
}
</script>

显示代码 复制代码 复制代码

Attributes

参数	说明	类型	可选值	默认值
config	配置项	object	—	-
bodyStyle	body区域样式	string	—	—
align-center	居中显示	string	—	—
simple	卡片式	boolean	—	false

Event

事件名称	说明	回调参数
save	保存的回调	-

slot

name	说明
{key}	config.steps.key

Config

参数	说明
steps	表单数组
key	slot name
label	barItem 文字