antd-vue-table自定义列
在表格展示时遇到需要特殊定义的列样式问题,可以通过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>