技術標籤：javascriptelementuicsshtml

介紹

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是一個功能強大的元件，如有更好的方法、疑問或者錯誤之處歡迎大家指正。對不同格式資料的處理問題也可以私聊或者在評論區討論。