element table根据后端数据合并行

roury

已于 2022-07-07 18:12:13 修改

阅读量727

点赞数

分类专栏： elementUI 小功能 vue 文章标签： javascript vue.js elementui

于 2021-08-26 17:58:44 首次发布

本文链接：https://blog.csdn.net/roury/article/details/115213978

版权

本文详细介绍了如何使用Element UI库在JavaScript和Vue.js中根据后端数据动态合并表格行。分别展示了单个子数组和多个子数组场景的处理方法，包括需求分析、效果展示、原始数据转换及代码实现。

摘要由CSDN通过智能技术生成

文章目录

（一）一个数组构成的表格（数据：每个数组项有1个子数组）

需求：

效果：

在这里插入图片描述

原数据和处理后数据

在这里插入图片描述

代码：（包括模拟数据的生成和数据处理）

<el-table v-loading="loading" :data="listData" :span-method="objectSpanMethod">
  <el-table-column prop="getOddNumbers" label="领用单号" width="20"></el-table-column>
  <el-table-column prop="assetsCoding" label="资产编码" width="200"></el-table-column>
</el-table>

data() {
   
	return {
   
		loading: false,
    	listData: [],
```js
getList(){
   
  this.loading = true;
  this.listData = [];
  let colNums = [2,2,1,3,3]
  // 模拟数据
  let resData = [];
  for(var i=0; i<5; i++){
   
    let form = {
   }
    form.id = i;
    form.getOddNumbers = '领用单号'+i;
    let temp = [];
    let len = colNums[i]
    for(let j=0; j<len; j++){
   
      let tempItem = {
   };
      tempItem.assetsCoding = '资产编码'+i+j;
      temp.push(tempItem);
    }
    form.assets