vue+element-ui中實現多層級複雜的維度根據資料自動生成的表頭
表頭主要複雜在:
1,有三層,一層是大類,第二層是具體項,第三層是標準值/對比值
2,首列和末尾列是一層
3,整個表格的維度是根據資料的輸入自己生成,也就是動態的
下面是在 vue + eleUI 中的解決方案:
<el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading" element-loading-text="拼命載入中">
<el-table-column fixed label="IP" prop="ip" width="180"></el-table-column>
<el-table-column v-for="(item, index) in itemList" :key="index" :label="item.label">
<el-table-column :label="standard_name" v-for="(standard,standard_name) in item.standard" width="150">
<el-table-column :label="standard" min-width="150">
<template scope="scope">
<span>{{scope.row.list[item.label][standard_name]['value']}}</span>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column fixed="right" label="驗收結果" width="100">
<template scope="scope">
<span :class="{'unqualified-color': !scope.row.result}">{{scope.row.result ? '合格' : '不合格'}}</span>
</template>
</el-table-column>
</el-table>
其對應data:
//整理出所有的label和標準物件的屬性
itemList: [],
//實際資料
tableData: []