Avue中将后端传输到的数据展示在页面上 如何书写form表
时间: 2024-02-21 12:00:32 浏览: 29
在 Avue 中,可以使用 Avue Form 组件来实现将后端传输的数据展示在页面上的功能。具体的表单书写方式如下:
1. 在页面中引入 Avue Form 组件:
```
<template>
<div>
<avue-form :config="formConfig"></avue-form>
</div>
</template>
<script>
import AvueForm from 'avue-plugin-form'
export default {
components: {
AvueForm
},
data () {
return {
formConfig: {...}
}
}
}
</script>
```
2. 在 data 中定义表单的配置信息,包括表单项的类型、名称、绑定的字段等信息:
```
data () {
return {
formConfig: {
formItems: [
{
type: 'input',
label: '姓名',
prop: 'name',
disabled: true
},
{
type: 'radio',
label: '性别',
prop: 'gender',
options: [
{label: '男', value: 'male'},
{label: '女', value: 'female'}
]
},
{
type: 'select',
label: '城市',
prop: 'city',
options: [
{label: '北京', value: 'beijing'},
{label: '上海', value: 'shanghai'},
{label: '广州', value: 'guangzhou'}
]
}
],
formData: {
name: '张三',
gender: 'male',
city: 'beijing'
}
}
}
}
```
在上面的代码中,我们定义了一个包含三个表单项的表单,分别是一个只读的文本框、一个单选框和一个下拉框,同时在 formData 中指定了表单项对应的值。
通过以上步骤,我们就可以在 Avue 中展示后端传输的数据了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)