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>

原文地址：https://blog.csdn.net/2301_76671906/article/details/143686132

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！