1. 程式人生 > >vue+element-ui中實現多層級複雜的維度根據資料自動生成的表頭

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: []