当前位置: 首页 > news >正文

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>


http://www.mrgr.cn/news/70408.html

相关文章:

  • 《文件操作》
  • Alluxio 在爱奇艺大数据的实践
  • vue el-table表格点击某行触发事件操作栏点击和row-click冲突问题
  • 基于Redis实现的手机短信登入功能
  • 瑞佑液晶控制芯片RA6807系列介绍 (三)软件代码详解 Part.10(让PNG图片动起来)完结篇
  • 【2024APMCM亚太赛A题】完整参考论文与代码分享
  • ROS2在自定义服务接口中的常数调用(python)
  • c++如何绑定一个类与类内成员的关系
  • AES加密原理
  • Docker使用docker-compose一键部署nacos、Mysql、redis
  • 分段式爬虫和数据采集的有趣话题
  • c++基础30字符
  • 【前端学习笔记】JavaScript学习一【变量与数据类型】
  • 体育数据API纳米篮球数据API:网球数据接口文档API示例③
  • 多态之魂:C++中的优雅与力量
  • 位运算_常见位运算总结
  • C语言 函数
  • mysql:解决windows启动失败无报错(或长时间未响应)
  • c++11(一)
  • 怎么查域名的交易价格?
  • 教育行业该怎么使用电子合同:降本增效,引领教育新未来
  • 如何提升自媒体发稿效果,必须掌握的几个技巧
  • 机器学习—多个输出的分类(Optional)
  • 2024数字化观察:你所需了解的8件事
  • monkey-安卓稳定性测试
  • 【语言建模】数据集合集!