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

4 years ago

source link: https://blog.csdn.net/QuiltKing/article/details/111450283
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

利用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>

先获取表头和表格内容，将表格内容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是一个功能强大的组件，如有更好的方法、疑问或者错误之处欢迎大家指正。对不同格式数据的处理问题也可以私聊或者在评论区讨论。

Recommend