问题效果:
话不多说 直接上代码
关键代码:
获取数据之后加上这个
整体代码:
<el-table
ref="stateStatisticsTable"
:data="tableData"
border
style="width: 100%"
:header-cell-style="{
background: 'rgb(239, 248, 255)',
color: 'rgb(96, 98, 102)',
}"
height="95%"
>
<template v-for="(itemData, indexData) in tableHeader">
<el-table-column
v-if="itemData.prop == 'unit'"
:key="itemData.prop"
:prop="itemData.prop"
:label="itemData.label"
:width="itemData.width ? itemData.width : '200'"
align="center"
fixed //固定第一列
>
</el-table-column>
<el-table-column
v-if="itemData.prop != 'unit'"
:key="itemData.prop"
:prop="itemData.prop"
:label="itemData.label"
:width="itemData.width"
align="center"
>
<template slot-scope="scope">
<div
style="width: 100%; display: flex; justify-content: center"
v-if="scope.row[itemData.prop] == '1'"
>
<div
style="
width: 12px;
height: 12px;
background-color: #167cc7;
border-radius: 50%;
"
></div>
</div>
<div
style="width: 100%; display: flex; justify-content: center"
v-if="scope.row[itemData.prop] == '2'"
>
<div
style="
width: 12px;
height: 12px;
background-color: #ef871d;
border-radius: 50%;
"
></div>
</div>
</template>
</el-table-column>
</template>
</el-table>
this.tableHeader = res.data.data.data[0].tableHeader; // 后端返回的表头
this.tableData = res.data.data.data[1].tableBody; // 数据
this.$nextTick(() => {
this.$refs.stateStatisticsTable.doLayout(); // 重要代码
});
解决效果图: