作为前端请使用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长度小于最大长度,则显示为-

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Spring Boot中使用VueElement UI来显示后端图片,可以按照以下步骤进行操作: 1. 在Spring Boot项目中,创建一个用于存储图片的文件夹,比如将其命名为"images"。 2. 将需要显示的图片上传到该文件夹中。 3. 在后端编写一个Controller,用于处理图片求。可以添加一个接口,比如"/api/image/{imageName}",用于获取某个特定图片的路径。 ```java @RestController @RequestMapping("/api/image") public class ImageController { @Value("${image.path}") private String imagePath; @GetMapping("/{imageName}") public void getImage(@PathVariable String imageName, HttpServletResponse response) throws IOException { File file = new File(imagePath + "/" + imageName); FileInputStream fis = new FileInputStream(file); IOUtils.copy(fis, response.getOutputStream()); } } ``` 配置文件中的image.path属性需要指向存放图片的文件夹路径。 4. 在Vue中,使用Element UI表格组件来显示图片。首先在Vue组件中定义一个data属性,用于保存图片数据。 ```javascript data() { return { imageUrl: '/api/image/' tableData: [] }; } ``` "imageUrl"属性用于指定获取图片的接口路径。 5. 从后端获取图片数据,在Vue组件的"mounted"生命周期中发起一个求,获取后端返回的图片数据,并将其赋值给表格的数据属性。 ```javascript mounted() { axios.get('/api/imageData') .then(response => { let data = response.data; // 对返回的data进行处理,将图片路径拼接上指定的路径 data.forEach(item => { item.imageUrl = this.imageUrl + item.imageName; }); this.tableData = data; }) .catch(error => { console.error('Error:', error); }); } ``` 6. 在表格的列定义中,使用Element UI的"el-table-column"组件来显示图片。 ```html <el-table-column prop="imageUrl" label="图片"> <template slot-scope="scope"> <img :src="scope.row.imageUrl" width="100" height="100"> </template> </el-table-column> ``` 通过以上的步骤,就可以在Spring Boot中使用VueElement UI来显示后端图片了。在表格中的图片列中,会显示相应的图片。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值