vue3使用elementplus中步骤条和表单组合

要在Vue3中使用Element Plus中的步骤条和表单组合，需要先安装Element Plus并在Vue项目中引入相关组件。

1. 安装Element Plus

可以使用npm或yarn来安装Element Plus：

npm install element-plus --save

或者

yarn add element-plus

2. 引入Element Plus组件

在Vue项目中引入Element Plus的步骤条和表单组件，可以在main.js文件中按如下方式引入：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

3. 使用步骤条和表单组件

在Vue组件中使用步骤条和表单组件，可以按照如下方式：

<template>
  <el-steps :active="activeStep" space="100px" finish-status="success">
    <el-step title="Step 1"></el-step>
    <el-step title="Step 2"></el-step>
    <el-step title="Step 3"></el-step>
  </el-steps>
  <el-form ref="form" :model="form" label-width="100px">
    <el-form-item label="Name" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="Email" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="Age" prop="age">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 0,
      form: {
        name: '',
        email: '',
        age: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过
          this.activeStep++
        }
      })
    }
  }
}
</script>

在上面的代码中，我们使用了el-steps和el-form两个Element Plus组件，其中el-steps用于展示步骤条，el-form用于展示表单。

在步骤条中，我们可以通过设置active属性来控制当前激活的步骤，通过finish-status属性来设置已完成步骤的状态。

在表单中，我们可以通过设置ref属性来获取form的引用，在submitForm方法中调用this.$refs.form.validate()来进行表单验证，验证通过后将activeStep加1，从而进入下一个步骤。