vxe-vxe-colgroup后端返回数据 对数据进行处理 动态合并分组表头(v-if控制表格渲染（数据请求完成后渲染）)

1.html vxe-colgroup循环合并数据；v-if控制表格渲染（数据请求完成后渲染）

<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 导致的问题。

        每次请求前数据进行清空处理，避免数据一直累加。

<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>