vxe-table实现动态列

news/2025/2/22 13:19:47

vxe-table实现动态列

  • 1.动态列解释
  • 2.解决步骤
    • 2.1将后端返回的动态列表头,按照格式拼接在固定列表头上
    • 2.2将后端返回的列表数据按照键值对格式组装

1.动态列解释

正常列表是有固定的列;我的需求是,最初只知道表格的固定两列,查询数据时候,后端会返回对应的动态列表头businessStationList和列表数据businessApplyInfoList
在这里插入图片描述
在这里插入图片描述

2.解决步骤

2.1将后端返回的动态列表头,按照格式拼接在固定列表头上

2.2将后端返回的列表数据按照键值对格式组装

const tableSetting_business = ref({
  showOverflow: 'tooltip',
  height: '100%',
  columns: [],
}) // 配置式表格的基础配置

// 固定的表头
let columns = ref([
    { type: 'seq', field: 'seq_key', title: '序号', width: 50 },
    { title: '网络名称', field: 'networkNameType', width: 180 },
    { title: '网络地址', field: 'networkAddress' },
    // { title: '实时网关', field: 'aaaa3' },
    // { title: '非实时网关', field: 'aaaa4' },
  ])



// 获取列表
const getList = () => {
  getThreeList({
    ...searchData.value,
  }).then(res => {
    businessStationList.value = res?.businessStationList || []  // 动态表头
    tableSetting_business.value.columns = columns.value || [] // 默认表头-避免每次拼接
    businessStationList.value.forEach(ele=>{
      ele.title = ele.stationName // 标题
      ele.field = ele.stationName // 唯一key
      ele.minWidth = 100 // 设置最小宽度
    })
    tableSetting_business.value.columns = tableSetting_business.value.columns.concat(businessStationList.value) // 合并表头
    
    tableData_business.value = res?.businessApplyInfoList || [] // 列表数据

    businessStationList.value.forEach(ele=>{
      tableData_business.value.forEach(item=>{ // 格式化数据
       let nowRow = item.businessStationList.find(item => item.stationName === ele.stationName) || {}
        item[ele.title] = nowRow?.stationValue
      })
    })
  })
}


http://www.niftyadmin.cn/n/5862318.html

相关文章

Arcmap和ArcgisPro重装及配置迁移

近期要重装一下ArcgisPro,在此记录并作为大家的借鉴 1.备份配置文件:其中Desktop10.8为Arcmap的配置文件 2.通过控制面板卸载,arcpro卸载时间较长,先将语言包等卸载,最后再卸载5G主程序,有些文章会介绍清理…

【Linux专栏】rsync 同步文件时自动创建目录

Linux && Oracle相关文档,希望互相学习,共同进步 风123456789~-CSDN博客 1.背景 rsync 同步文件夹,之前的文章中也写过了(详见:【Linux专栏】find命令+同步 实验-CSDN博客 ),可以同步指定文件夹、或者筛选指定时间范围的文件夹,然后将符合条件的文件夹全部同步…

【Python爬虫(31)】解锁Python多线程编程:从入门到实战

【Python爬虫】专栏简介:本专栏是 Python 爬虫领域的集大成之作,共 100 章节。从 Python 基础语法、爬虫入门知识讲起,深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑,覆盖网页、图片、音频等各类数据爬取&#xff…

路由基本配置

学习目标 • 根据拓扑图进行网络布线。 • 清除启动配置并将路由器重新加载为默认状态。 • 在路由器上执行基本配置任务。 • 配置并激活以太网接口。 • 测试并检验配置。 • 思考网络实施方案并整理成文档。 任务 1:网络布线 使用适当的电缆类型连接网络设备。…

发现问题 python3.6.13+django3.2.5 只能以asgi启动server 如何解决当前问题

在 Python 3.6.13 和 Django 3.2.5 的组合下,如果你发现只能使用 ASGI 启动 Django 服务,而不能使用 WSGI,可能的原因有几个。我们来分析一下常见的问题和解决方案。 1. 默认 ASGI 支持 从 Django 3.0 开始,Django 引入了对 ASG…

矩阵-旋转图像

旋转图像 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。输入:二维数组 输出:void 思路:tempM…

【Postgresql】Linux 部署 Postgresql 数据库 (图文教程)

文章目录 安装编译工具安装 readline 开发库安装 zlib 开发库创建postgres用户创建postgres用户,并添加到postgres用户组解压压缩包创建一个安装目录,随便起名就行,位置也随意即可,我这里创建到刚解压完的路径下,起的名为postgresql一定要进入到解压后的文件目录下,上图路…

在windows下安装windows+Ubuntu16.04双系统(上)

这篇文章的内容主要来源于这篇文章,给文章很详细的介绍了如何从windows下安装windowsubuntu16.04双系统。我刚开始装双系统都是参照这个方法,该作者前后更新了两个版本,在这里对其稍微进行整理一下。 一、准备:(这里推…