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>
相关推荐
万粉变现经纪人28 分钟前
如何解决 pip install -r requirements.txt 私有索引未设为 trusted-host 导致拒绝 问题
开发语言·python·scrapy·flask·beautifulsoup·pandas·pip
qq_4798754333 分钟前
C++ std::Set<std::pair>
开发语言·c++
云知谷3 小时前
【C++基本功】C++适合做什么,哪些领域适合哪些领域不适合?
c语言·开发语言·c++·人工智能·团队开发
键盘不能没有CV键3 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ3 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
l1t4 小时前
DeepSeek辅助利用搬移底层xml实现快速编辑xlsx文件的python程序
xml·开发语言·python·xlsx
大飞记Python4 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep5 小时前
【前端】前端运行环境的结构
前端
你的人类朋友5 小时前
【Node】认识multer库
前端·javascript·后端
Aitter5 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程