vue+elementui的el-form+axios的api接口怎么配合使用

可以先在el-form的submit方法中使用axios发送请求，具体的方法如下：

在template中：

<el-form ref="form" :model="form" :rules="rules" label-width="120px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>

在script中：

import axios from 'axios';
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          axios.post('/api/login', this.form).then(response => {
            if (response.data.code === 200) {
              // 登录成功，跳转到首页
              this.$router.push('/home');
            } else {
              this.$message.error('登录失败');
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};

在上述代码中，我们先引入了axios，使用axios发送POST请求到后台的/api/login接口，参数为表单中的form数据。如果接口返回的状态码为200，说明登录成功，此时可以跳转到首页。如果接口返回的状态码不为200，说明登录失败，此时可以给用户提示登录失败信息。

至此，vue和element-ui的form组件与axios的api接口就配合使用成功了。