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>
相关推荐
竹秋…5 分钟前
element-plus <el-date-picker>日期选择器踩坑!!!!
javascript·vue.js·elementui
qbbmnnnnnn6 分钟前
【vue2.0入门】vue基本语法
前端·vue.js·前端框架
ephemerals__10 分钟前
【c++丨STL】list的使用
开发语言·c++
promise-render17 分钟前
npm、yarn、pnpm 切换查看镜像源笔记
前端·笔记·npm
修复bug20 分钟前
npm完整发包流程(亲测可验证)
前端·npm·开源
丁总学Java22 分钟前
使用 npm 安装 Yarn
前端·npm·node.js
理想不理想v23 分钟前
执行npm run build -- --report后,生产report.html文件是什么?
java·前端·javascript·vue.js·webpack·node.js
yang_shengy24 分钟前
【JavaEE】认识线程
java·开发语言
老猿讲编程24 分钟前
Rust编写的贪吃蛇小游戏源代码解读
开发语言·后端·rust
Bruce小鬼29 分钟前
QT鼠标事件
开发语言·qt·计算机外设