Avue中将后端传输到的数据展示在页面上 如何将数据渲染到form

在 Avue 中将后端传输到的数据展示在页面上的方法，主要有两种：

1. 手动渲染表单数据

在 Avue 中，可以通过在 `mounted` 钩子中手动将后端传输的数据渲染到表单中。具体操作步骤如下：

首先，定义表单的配置信息和初始化数据：

data () {
  return {
    formConfig: {
      formItems: [
        {
          type: 'input',
          label: '姓名',
          prop: 'name'
        },
        {
          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: '',
        city: ''
      }
    }
  }
}

然后，在 `mounted` 钩子中获取后端传输的数据，并将其赋值给 formData：

mounted () {
  // 获取后端传输的数据
  fetch('api/user')
    .then(res => res.json())
    .then(data => {
      // 将数据赋值给 formData
      this.formConfig.formData = data
    })
}

这样，当组件加载完成后，表单就会自动将后端传输的数据渲染到表单中。

2. 使用 Avue 的 `form-create` 插件

Avue 还提供了一个 `form-create` 插件，可以帮助我们更方便地将后端传输的数据渲染到表单中。使用该插件的步骤如下：

首先，安装 `form-create` 插件：

npm install form-create --save

然后，在组件中引入并注册该插件：

<template>
  <fc :f="form" :v="formData"></fc>
</template>

<script>
import formCreate from 'form-create'
export default {
  data () {
    return {
      form: {
        name: {
          type: 'input',
          title: '姓名',
          value: ''
        },
        gender: {
          type: 'radio',
          title: '性别',
          value: '',
          options: [
            {label: '男', value: 'male'},
            {label: '女', value: 'female'}
          ]
        },
        city: {
          type: 'select',
          title: '城市',
          value: '',
          options: [
            {label: '北京', value: 'beijing'},
            {label: '上海', value: 'shanghai'},
            {label: '广州', value: 'guangzhou'}
          ]
        }
      },
      formData: {
        name: '',
        gender: '',
        city: ''
      }
    }
  },
  mounted () {
    // 获取后端传输的数据
    fetch('api/user')
      .then(res => res.json())
      .then(data => {
        // 将数据赋值给 formData
        this.formData = data
      })
  },
  created () {
    // 注册 form-create 插件
    formCreate.init(this)
  }
}
</script>

在上面的代码中，我们定义了一个表单配置信息 `form`，并通过 `mounted` 钩子获取后端传输的数据，将其赋值给 `formData`。然后，在 `created` 钩子中注册 `form-create` 插件。

通过以上步骤，我们就可以在 Avue 中将后端传输的数据渲染到表单中了。