后端传输数据给前端 前端用avue如何将数据渲染请举例

假设后端传输的数据为一个列表，每个元素包含姓名和年龄两个属性，数据格式如下：

[
  {"name": "张三", "age": 18},
  {"name": "李四", "age": 20},
  {"name": "王五", "age": 22}
]

在前端使用 Avue 渲染这些数据，可以按照以下步骤进行：

1. 在 Vue 组件中引入 Avue 组件：

import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';

export default {
  components: {
    Avue
  },
  // ...
}

2. 在 Vue 模板中添加 Avue 组件，并配置表格的列和数据：

<template>
  <div>
    <avue-crud
      :columns="columns"
      :data="data"
    ></avue-crud>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {key: 'name', label: '姓名'},
        {key: 'age', label: '年龄'}
      ],
      data: [
        {name: '张三', age: 18},
        {name: '李四', age: 20},
        {name: '王五', age: 22}
      ]
    };
  }
};
</script>

这样就可以在页面上看到一个包含姓名和年龄的表格，其中每一行对应一个数据元素。如果后端传输的数据格式不同，需要根据实际情况调整 Avue 组件的配置。