ant design vue通过api获取后台数据并展示在list代码

<template>
<div class="list">
<a-row :gutter="16" v-if="list.length">
<a-col :span="6" v-for="(item, index) in list" :key="index">
<a-card :title="item.title">
<p>{{item.description}}</p>
</a-card>
</a-col>
</a-row>
<a-empty v-else />
</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
computed: {
...mapState(['list'])
},
mounted () {
this.getList()
},
methods: {
getList () {
axios.get('/api/list')
.then(res => {
this.$store.commit('setList', res.data)
})
.catch(err => {
console.log(err)
})
}
}
}
</script>

相关问题

ant design vue获取后台数据并展示在list代码

以下是一个简单的例子，用AntDesign Vue获取后台数据并展示在List中：

<template>
  <div>
    <a-button @click="fetchData">获取数据</a-button>
    <a-list
      bordered
      v-if="data.length > 0"
      :dataSource="data"
      :renderItem="(item) => {
        return {
          title: item.title,
          description: item.description,
        };
      }"
    ></a-list>
    <a-spin size="large" v-else-if="loading"></a-spin>
    <p v-else>暂无数据</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: [],
      loading: false,
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('/api/data').then((res) => {
        this.data = res.data;
        this.loading = false;
      }).catch((err) => {
        console.error(err);
        this.loading = false;
      });
    },
  },
};
</script>

上述代码中，我们定义了一个AntDesign Vue的List组件，并通过渲染函数将后台数据展示在List中。同时，我们还定义了一个fetchData方法，通过Axios获取后台数据，并将获取到的数据赋值给data属性。在获取数据的过程中，我们可以使用a-spin组件展示加载状态。

ant design vue怎么写一个纵向表格，通过id数组从后台获取数据，写一个简单代码

好的，请稍等，我来为你查找相关资料和代码示例。

以下是基于 Ant Design Vue 中的 Table 组件实现纵向表格的示例代码：

<template>
  <a-table :columns="columns" :dataSource="dataSource" rowKey="id">
    <template v-for="id in idList">
      <template v-if="dataMap[id]">
        <a-table-column :title="dataMap[id].name" :key="id">
          <template slot-scope="record">
            {{ record[id] }}
          </template>
        </a-table-column>
      </template>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [], // 表格列定义
      dataSource: [], // 表格数据源
      idList: [], // 数据项 ID 列表
      dataMap: {}, // 数据项 ID 到名称的映射
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      // 通过后台接口获取数据项信息和数据列表
      const { data } = await this.$http.get('/api/data')
      this.columns = data.columns.map(column => ({
        title: column.name,
        dataIndex: column.id,
        key: column.id,
      }))
      this.dataSource = data.list
      this.idList = data.columns.map(column => column.id)
      this.dataMap = data.columns.reduce((map, column) => {
        map[column.id] = column
        return map
      }, {})
    },
  },
}
</script>

该示例维护一个 ID 列表，然后依次渲染对应的数据项列，表格每行的数据是从后台获取的。如果要按照 ID 列表的顺序显示数据项，则需要对数据列表进行预处理。如果 ID 列表数量较大，建议使用分页查询接口，以提高数据查询和渲染的效率。