作为前端请使用vue2,elementUI框架 根据后端返回的json 生成表格.

在Vue2与Element UI的环境下,你可以创建一个组件来展示这样的动态表格。以下是一个基本的实现示例:

1. 安装Element UI

确保你已经安装了Element UI,如果没有,请通过以下命令进行安装:

复制代码
npm install element-ui --save

并在你的main.js文件中引入并使用Element UI:

复制代码
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 创建Vue组件

接下来,创建一个名为DynamicTable.vue的文件,并编写以下代码:

复制代码
<template>
  <el-table :data="formattedData" stripe border>
    <el-table-column prop="statDate" label="日期"></el-table-column>
    <el-table-column prop="name" label="名字"></el-table-column>
    <el-table-column prop="cnt" label="数量"></el-table-column>

    <el-table-column v-for="(cust, index) in maxCusts" :key="index" :label="`用户${index + 1} collCnt`">
      <template slot-scope="scope">
        {{ scope.row.custList[index] ? scope.row.custList[index].collCnt : '-' }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'DynamicTable',
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  computed: {
    formattedData() {
      // 确定最大的custList长度
      this.maxCusts = Math.max(...this.tableData.map(item => item.custList.length));
      return this.tableData;
    }
  },
  data() {
    return {
      maxCusts: 0 // 初始化最大用户数为0
    };
  }
};
</script>

3. 在父组件中使用

在你的父组件中,你将从后端获取的数据传递给这个DynamicTable组件。

复制代码
<template>
  <div>
    <dynamic-table :table-data="jsonData.rows"></dynamic-table>
  </div>
</template>

<script>
import DynamicTable from './DynamicTable.vue';

export default {
  components: {
    DynamicTable
  },
  data() {
    return {
      jsonData: { /* 这里放置你从后端获取的JSON数据 */ }
    };
  }
};
</script>

这样,你就创建了一个可以动态根据后端返回的JSON数据生成表格的Vue组件,且能够根据custList中用户的数量动态显示对应的collCnt数据。注意,如果某行数据的custList长度小于最大长度,则显示为-

相关推荐
IT_陈寒23 分钟前
Redis的KEYS命令把我搞崩溃了,改用SCAN才活过来
前端·人工智能·后端
Jackson__1 小时前
为什么 Agent 越聊越慢?聊聊 Context(上下文)管理
前端·agent·ai编程
KaMeidebaby1 小时前
卡梅德生物技术快报|抗体合成:多肽抗体合成工程化方案:Nsp2 保守肽多抗制备与多维度验证
前端·网络·数据库·人工智能·算法
青禾网络1 小时前
前端做音画匹配这件事,我从"随机塞"到"AI 自动对齐"
前端·github
2601_963771372 小时前
Hardening Enterprise WordPress Sites Against REST API Leaks and Bad Headers
前端·windows·word·php
蓝银草同学2 小时前
Stream 实战:博客列表排序、过滤与分页(AI 辅助学习 Java 8)
java·前端·后端
2601_957190902 小时前
飞行影院安装施工指南:场地、动感系统与影片内容配套
大数据·前端·人工智能
爱折腾的小黑牛2 小时前
简记往来批量录入功能的实现:从文本到结构化数据
前端·算法
YHHLAI3 小时前
Agent 智能体开发实战 · 第六课:MCP 协议 —— 让 Agent 跨进程调用工具
前端·人工智能
SmartBoyW3 小时前
前端死磕:一文彻底搞懂 JS 事件循环 (Event Loop) 与宏微任务
前端·javascript