1.html vxe-colgroup循环合并数据;v-if控制表格渲染(数据请求完成后渲染)
html
<template>
<vxe-table v-if="isTableReady" :data="tableData">
<vxe-colgroup title="基本信息">
<template v-for="(column, index) in dynamicColumns">
<vxe-column
:key="index"
:field="column.field"
:title="column.title"
:width="column.width"
></vxe-column>
</template>
</vxe-colgroup>
<vxe-colgroup title="详细信息">
<template v-for="(column, index) in dynamicColumns">
<vxe-column
:key="index"
:field="column.field"
:title="column.title"
:width="column.width"
></vxe-column>
</template>
</vxe-colgroup>
</vxe-table>
</template>
2.script 设表格渲染标识isTableReady 请求数据前false 请求后true
使用 v-if="isTableReady"
来控制 vxe-table
的渲染,获取新数据后,将 isTableReady
设置为 true
,以渲染 vxe-table
。只有在数据请求返回后,vxe-table
才会被渲染,从而避免了在数据请求返回前渲染 vxe-table
导致的问题。
每次请求前数据进行清空处理,避免数据一直累加。
javascript
<script>
import 'vxe-table/lib/style.css';
import { VxeTable, VxeColumn, VxeColgroup } from 'vxe-table';
import axios from 'axios';
export default {
components: {
VxeTable,
VxeColumn,
VxeColgroup
},
data() {
return {
tableData: [],
dynamicColumns: [],
isTableReady: false
};
},
activated() {
//每次设为false请求完数据后设为true,表格重新渲染
this.isTableReady=false;
this.fetchColumns();
},
methods: {
fetchColumns() {
axios.get('/api/columns') // 替换为你的后端 API 地址
.then(response => {、
//数据清空
this.dynamicColumns=[];
this.allCostTypeList= response.data;
//数据处理
this.allCostTypeList.forEach(item => {
const newColumn = {
title: item.name,
field: item.value
}
this.dynamicColumns.push(newColumn)
})
})
.catch(error => {
console.error('Error fetching columns:', error);
});
}
}
};
</script>
<style>
/* 你可以在这里添加自定义样式 */
</style>