在表格展示時遇到需要特殊定義的列樣式問題,可以通過
bodyCell自行定義。
<a-table
id="entity_list_tbl"
:dataSource="dataList"
:rowSelection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:customRow="customRow"
:columns="columns"
:scroll="{ x: 1300, y: 635 }"
:rowKey="(record: any) => record.id"
>
<template #bodyCell="{ text, record, index, column }">
<template v-if="column.key === 'status'">
<span v-if="index % 2 == 1" style="color: #40a9ff">正常</span>
<span v-if="index % 2 == 0" style="color: #da3d16">維修中</span>
</template>
<template v-if="column.key === 'repairFlag'">
<span v-if="record.repairFlag == 'N'" style="color: #40a9ff">{{
text
}}</span>
<span v-else style="color: #da3d16">{{ text }}</span>
</template>
<template v-if="column.key === 'meterFlag'">
<span v-if="record.meterFlag == 'N'" style="color: #40a9ff">{{
text
}}</span>
<span v-else style="color: #da3d16">{{ text }}</span>
</template>
<template v-if="column.key === 'controlledFlag'">
<span
v-if="record.controlledFlag == 'N'"
style="color: #40a9ff"
>{{ text }}</span
>
<span v-else style="color: #da3d16">{{ text }}</span>
</template>
<template v-if="column.key === 'emergencyFlag'">
<span
v-if="record.emergencyFlag == 'N'"
style="color: #40a9ff"
>{{ text }}</span
>
<span v-else style="color: #da3d16">{{ text }}</span>
</template>
</template>
</a-table>