### 回答1：
好的，首先需要引入 element-ui 和 axios：
```
import { Form, Input } from 'element-ui'
import axios from 'axios'
```
然后，我们可以通过 axios 发起一个
ajax 请求来获取表单数据：
```
axios.get('/api/form-
data').then(res => {
// 表单数据已经获取到了，我们可以将它
赋值给表单
this.form.name = res.
data.name
this.form.age = res.
data.age
this.form.gender = res.
data.gender
})
```
最后，我们可以在表单
中使用 v-model 指令来绑定数据：
```
<el-form ref="form" :model="form">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio v-model="form.gender" label="男"></el-radio>
<el-radio v-model="form.gender" label="女"></el-radio>
</el-form-item>
</el-form>
```
完整的示例代码如下：
```
<template>
<div>
<el-form ref="form" :model="form">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio v-model="form.gender" label="男"></el-radio>
<el-radio v-model="form.gender" label="女"></el-radio>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { Form, Input } from 'element-ui'
import axios from 'axios'
export default {
data() {
return {
form: {
name: '',
age: '',
gender: ''
}
}
},
created()
### 回答2：
Element UI是一个基于
Vue.js的组件库，它提供了一套丰富的UI组件，其
中也包括了表单组件。要使用
ajax给Element UI的表单
赋值，可以按照以下步骤进行：
1. 在
Vue的
data中定义一个表单数据对象，用于存储表单的各个字段的值。
```javascript
data() {
return {
form
Data: {
name: '',
age: '',
email: ''
}
}
}
```
2. 在模板
中使用Element UI的表单组件，并将表单数据对象绑定到表单组件的model属性上。
```html
<template>
<el-form :model="form
Data">
<el-form-item label="姓名">
<el-input v-model="form
Data.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form
Data.age"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form
Data.email"></el-input>
</el-form-item>
</el-form>
</template>
```
3. 在
Vue的方法
中使用
ajax获取表单数据，并将返回的数据
赋值给表单数据对象。
```javascript
methods: {
fetch
Data() {
// 使用
ajax获取数据，这里假设返回的数据为response
axios.get('/api/getForm
Data').then(response => {
this.form
Data = response.
data;
}).catch(error => {
console.log(error);
});
}
}
```
4. 在需要的时候调用fetch
Data方法获取数据，比如在页面加载完成后调用created钩子函数。
```javascript
created() {
this.fetch
Data();
}
```
以上就是用Element UI的
ajax给表单
赋值的一个简单的demo。在具体的项目
中，根据实际情况可能还需要进行一些其他的处理，比如表单验证等。不过基本的原理就是通过
ajax获取数据，然后将数据
赋值给表单数据对象即可。
### 回答3：
element ui是基于
Vue.js的一套UI组件库，可以帮助我们快速构建页面。在使用element ui时，可以使用
ajax来给表单
赋值，以下是一个简单的demo示例。
首先，我们需要在HTML的`<head>`标签
中引入
Vue.js和element ui的相关文件：
```html
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/
vue/dist/
vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
然后，在页面上创建一个包含表单的div，并指定一个id：
```html
<div id="app">
<el-form ref="myForm" :model="form
Data" label-width="100px">
<el-form-item label="姓名">
<el-input v-model="form
Data.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form
Data.age"></el-input>
</el-form-item>
<!-- 其他表单项 -->
<el-form-item>
<el-button type="primary" @click="load
Data">获取数据</el-button>
</el-form-item>
</el-form>
</div>
```
接下来，在JavaScript代码
中定义
Vue实例，并在
data中初始化表单数据：
```javascript
new
Vue({
el: '#app',
data: {
form
Data: {
name: '',
age: '',
// 其他表单项的初始数据
}
},
methods: {
load
Data() {
// 使用
ajax获取数据
// 此处假设使用jQuery来发送
ajax请求
$.
ajax({
url: 'your_api_url',
success: (
data) => {
// 将获取的数据
赋值给表单数据
this.form
Data.name =
data.name;
this.form
Data.age =
data.age;
// 其他表单项的
赋值
},
error: (error) => {
console.log(error);
}
});
}
}
});
```
在load
Data方法
中，通过
ajax请求获取数据，并将获取的数据
赋值给表单数据。这样，当点击"获取数据"按钮时，会自动将
ajax请求返回的数据
赋值给表单
中对应的输入框。
当然，以上只是一个简单的示例，实际使用时，你需要根据自己的情况来实现具体的
ajax请求和数据
赋值逻辑。
2518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
