ant design vue怎么写一个纵向表格,通过id数组从后台获取数据,写一个简单代码
时间: 2024-05-04 15:22:46 浏览: 7
好的,请稍等,我来为你查找相关资料和代码示例。
以下是基于 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 列表数量较大,建议使用分页查询接口,以提高数据查询和渲染的效率。