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>
相关推荐
Python×CATIA工业智造3 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
我叫小白菜4 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄4 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122465 小时前
JAVA内存区域划分
java·开发语言·redis
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack6 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
whoarethenext6 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure