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

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>
相关推荐
Ysjt | 深7 分钟前
C++多线程编程入门教程(优质版)
java·开发语言·jvm·c++
ephemerals__12 分钟前
【c++丨STL】list模拟实现(附源码)
开发语言·c++·list
码农飞飞16 分钟前
深入理解Rust的模式匹配
开发语言·后端·rust·模式匹配·解构·结构体和枚举
一个小坑货18 分钟前
Rust 的简介
开发语言·后端·rust
湫ccc26 分钟前
《Python基础》之基本数据类型
开发语言·python
Matlab精灵27 分钟前
Matlab函数中的隐马尔可夫模型
开发语言·matlab·统计学习
Microsoft Word27 分钟前
c++基础语法
开发语言·c++·算法
吃杠碰小鸡30 分钟前
commitlint校验git提交信息
前端
数据小爬虫@30 分钟前
如何利用java爬虫获得淘宝商品评论
java·开发语言·爬虫
qq_1728055937 分钟前
RUST学习教程-安装教程
开发语言·学习·rust·安装