el-table 动态合并单元格

原创已于 2022-04-19 17:31:36 修改 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

于 2022-04-19 17:26:20 首次发布

这篇博客探讨了如何处理后端返回的复杂数据结构，并在前端进行数据重构，以便在表格中正确显示。通过js代码示例展示了如何遍历数据，创建新的数据数组，并根据数据特性合并表格单元格。此外，还提供了合并规则函数和Vue模板，用于实现动态表格的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

将后端返回的数据进行重构后显示在前端

数据格式：

this.data = [
              {
                "country":"China",
                "place":[
                  {
                    "name":"bj",
                    "population":"100000",
                    "develop":"good",
                  },
                  {
                    "name":"bj",
                    "population":"100000",
                    "develop":"good",
                  },
                ]
              },
              {
                "country":"America",
                "place":[
                  {
                    "name":"na",
                    "population":"100000",
                    "develop":"good",
                  },
                ]
              },
              {
                "country":"Italy",
                "place":[
                  {
                    "name":"cn",
                    "population":"20000",
                    "develop":"good",
                  },
                  {
                    "name":"we",
                    "population":"7000",
                    "develop":"soso",
                  },
                  {
                    "name":"tr",
                    "population":"900000",
                    "develop":"good",
                  },
                  {
                    "name":"nk",
                    "population":"200",
                    "develop":"good",
                  },
                ]
              },
              {
                "country":"UK",
                "place":[
                  {
                    "name":"irland",
                    "population":"1000000",
                    "develop":"good",
                  }
                ]
              }

js代码

注意：data中需要定义：

data() {
    return {
    	getData: [], //整理后的数据
    	firstArr: [], //需要合并的地方
    	}
  }

getSpanArr(data){
      this.getData = [];
      for(let i=0; i<data.length;i++){
        this.firstArr[i] = data[i].place.length; //保存每一个place的长度
        let pData = data[i].place;
        for(let j=0; j<cdata.length; j++){
          //需要重构数据
          this.getData.push({
            country: data[i].country,
            name: pdata[j].name,
            population: pdata[j].population,
            develop: pdata[j].develop
          });
        }
      }

      //现在需要把firstArr合进去
      let k = 0;
      for(let i=0; i<this.firstArr.length;i++){
        if(this.firstArr[i] === 1){ //place里面只有一个对象
          this.getData[k].onlyIndex = this.firstArr[i];
          k=k+1;
        }
        else if(this.firstArr[i]>1){
          this.getData[k].placeIndex = this.firstArr[i];
          k += this.firstArr[i];
        }
      }
    }

//合并规则
testArraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if(row.onlyIndex) return [1,1]
        else if(row.checklistIndex){
          return [row.checklistIndex, 1]
        }else return [0,0]
      }
    }

vue页面

<template>
  <div>
    <el-table
      :data="getData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <el-table-column
        property="country"
        label="国家"
        width="180">
      </el-table-column>
      <el-table-column
        property="name"
        label="地区">
      </el-table-column>
      <el-table-column
        property="population"
        label="人口">
      </el-table-column>
      <el-table-column
        property="develop"
        label="发展状况"">
      </el-table-column>
    </el-table>
  </div>
</template>