vue3 antdesign table表格特定单元格背景变色

效果：

<a-table  :columns="columnsAll" :data-source="tableAllData"bordered size="middle"  :scroll="{ x: '100',y: 600 }" :pagination="false"style="margin: 0 10px 10px 10px;" ><template #bodyCell="{ column, record, index }"><span>{{ record[column.dataIndex] }}</span></template>
</a-table>

<script setup lang="ts">
import { onMounted, reactive, ref, computed} from "vue";
import { message,notification } from "ant-design-vue";
const columnsAll = ref<any>([])
const tableAllData = ref<any>([]);
const specialCells = ref<any>([]);//变色单元格所在 行下标，列下标，值
const checkDataList = () => {let param = {type:'3',}uploadSalary(param).then((res: any) => {if(res.status == 200){message.success('校验成功');pageList.value = res.respdata;specialCells.value = res.errorindexcolumnsAll.value = res.columnsjson.map(col => {return { ...col, width: '180px'};});tableAllData.value = res.valuesjson;//单表头// const processedColumns = columnsAll.value.map((col, colIndex) => {//     return {//         ...col,//         customCell: (record, rowindex,column) => {//          const cellInfo = specialCells.value.find(cell => cell[0] === rowindex && cell[1] === colIndex);//             if (cellInfo) {//                 return {//                 style: {//                     backgroundColor: '#fff1f0',//                     color: '#cf1322',//                 },//                 };//             }//             return {};//         },//     };// });//多级表头处理const processColumns = (columns, indexCounter = { index: 0 }) => {return columns.map(col => {if (col.children) {// 递归处理子列return {...col,children: processColumns(col.children, indexCounter),};} else {// 叶子列：分配当前索引并递增const currentColIndex = indexCounter.index++;return {...col,customCell: (record, rowIndex) => {const cellInfo = specialCells.value.find(cell => cell[0] === rowIndex && cell[1] === currentColIndex);return cellInfo ? { style: { backgroundColor: '#fff1f0', color: '#cf1322' } } : {};},};}});};// 生成最终处理后的列配置columnsAll.value = processColumns(columnsAll.value, { index: 0 });}else{message.error('校验失败');}}).catch((error: any) => {if (error.response) {const status = error.response.status;if (status === 422) {if(error.response.data.misscol){const misscol = error.response.data.misscol;const resultString = misscol.join(", ");openNotificationWithIcon(error.response.data.error,resultString)}else if(error.response.data.errercol){const errercol = error.response.data.errercol;const resultString = errercol.join(", ");openNotificationWithIcon(error.response.data.error,resultString)}} else {istableLoading.value = false// 其他 HTTP 错误message.error(error.message);}} else {message.error('请求失败:', error.message);istableLoading.value = false}})
}
</script>

//动态表头数据
const columnsAll = [{"title": "姓名","dataIndex": "f01020003","key": "f01020003"},{"title": "身份证号","dataIndex": "f01020004","key": "f01020004"},{"title": "岗位工资","dataIndex": "f02010001","key": "f02010001"},{"title": "人员类别","children": [{"title": "本次人员类别","dataIndex": "f01020005","key": "f01020005"},{"title": "上月人员类别","dataIndex": "花名册人员类别","key": "花名册人员类别"}]},{"title": "职务","children": [{"title": "本次职务","dataIndex": "f01020001","key": "f01020001"},{"title": "上月职务","dataIndex": "花名册职务","key": "花名册职务"}]},
]
//[单元格行下标，列下标，值]
const errorindex =  [[0,7,38908],[0,2,15000],[1,7,38908],[1,2,15000],[2,7,36788],[2,2,14000],[3,7,36788],[3,2,14000],[4,7,34528],[4,2,14000],]