基于Element组件下动态生成多级表头以及数据

介绍

element是一套基于vue的组件，本文主要介绍如何根据后端传输数据来动态生成表格。

代码

html

利用vue里的for循环来动态生成表头，再利用if语句判断是否有二级表头，并将对应key赋值给label和prop

<template id="table">
    <el-table :data="tableData" :stripe=true :border=true  height="80%"  class="tablehead">
      <!-- for循环 
      判断是否含有子类
      -->
      <el-table-column v-for="key in listhead" v-if="key[Object.keys(key)]!=null" :label="Object.keys(key).toString()"
        :prop="Object.keys(key).toString()">
        <el-table-column v-for="keychild in key[Object.keys(key)]" :label="keychild"
          :prop="keychild" sortable>
        </el-table-column>
      </el-table-column>
      <el-table-column v-else :label="Object.keys(key).toString()" :prop="Object.keys(key).toString()" sortable>
      </el-table-column>
    </el-table>
  </template>

js

先获取表头和表格内容，将表格内容push到数组并添加对应的key方便使用

 var listhead = test[0]; //获取表头
    var listbody = test[1]; //获取内容
    listhead = eval(listhead);
    //创建表格内容的数组
    var listbodyarr = [];
    for (i in listbody) {
   
      console.log(listbody[i][0])
     listbodyarr.push({
   
          '商品号': listbody[i][0],
          'a_1': listbody[i][1],
          'a_2': listbody[i][2],
          'a_3': listbody[i][3],
          'a_4': listbody[i][4],
          'b_1': listbody[i][5],
          'b_2': listbody[i][6],
          'b_3': listbody[i][7],
          'b_4': listbody[i][8],
          'C': listbody[i][9],
          'D': listbody[i][10],
          'E': listbody[i][11],
        });
    }
    new Vue({
   
      el: '#table',
      data: function () {
   
        return {
   
          tableData: listbodyarr,//表格内容
          listhead: listhead,//表头
        }

      }
    })

后端数据

假定后端数据如下展示格式

 var test = [
      [{
   
          "商品号": null
        },
        {
   
          " A": ["a_1", "a_2", "a_3", "a_4"]
        },
        {
   
          "B": ["b_1", "b_2", "b_3", "b_4"]
        },
        {
   
          "C": null
        },
        {
   
          "D": null
        },
        {
   
          "E": null
        }
      ],
      [
        ["1234", 0, 4, 0, 4, 0, 4, 0, 4, 0, 0, 0],
        ["12345", 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0],
        ["23123", 6, 1, 2, 9, 3, 0, 7, 10, 2, 0, 0],
        ["P123", 2, 1, 1, 4, 0, 0, 1, 1, 1, 0, 0],
        ["43244", 0, 4, 0, 4, 0, 4, 0, 4, 0, 0, 0],
        ["fsdf3", 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0],
        ["134324", 6, 1, 2, 9, 3, 0, 7, 10, 2, 0, 0],
        ["fsdf3", 2, 1, 1, 4, 0, 0, 1, 1, 1, 0, 0],
        ["3452", 0, 4, 0, 4, 0, 4, 0, 4, 0, 0, 0],
        ["1026", 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0],
        ["7527", 6, 1, 2, 9, 3, 0, 7, 10, 2, 0, 0],
        ["7788", 2, 1, 1, 4, 0, 0, 1, 1, 1, 0, 0],
        ["0yly", 0, 4, 0, 4, 0, 4, 0, 4, 0, 0, 0],
        ["wuhu", 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0],
        ["saber1", 6, 1, 2, 9, 3, 0, 7, 10, 2, 0, 0],
        ["23344", 2, 1, 1, 4, 0, 0, 1, 1, 1, 0, 0],
      ]
    ]

结语

Element是一个功能强大的组件，如有更好的方法、疑问或者错误之处欢迎大家指正。对不同格式数据的处理问题也可以私聊或者在评论区讨论。