How to add class name equal to the key to th in table on Ant Design Vue 3?

I need to add a class name to the th accordingly to the :key attribute in Vue 3 for some styles that I’m doing. I’m not sure how to do it and I was wondering if it’s possible to do it straight on the template. Can you guys help me?

This is my code:

<template>
     <a-table bordered :data-source="tableData.data" :columns="tableData.columns" :pagination="false" class="tableEditable">
        <template v-for="col in this.editableCells" #[col]="{ column, text, record }" :key="col">
            <div class="editable-cell">
                <div v-if="editableData[record.key + '|' + column.key] !== undefined" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData[record.key + '|' + column.key]" @pressEnter="save(record.key, column.key)" type="number" />
                    <check-outlined class="editable-cell-icon-check" @click="this.save(record.key, column.key)" />
                </div>
                <div v-else class="editable-cell-text-wrapper">
                    {{ text || ' ' }}
                    <edit-outlined class="editable-cell-icon" @click="this.edit(record.key, column.key)" />
                </div>
            </div>
        </template>
        <template #buttonTable="{text, record}">
            <div class="editableTableButtonOption">
                {{text}}
                <Popper arrow :locked="true">
                    <button class="statusButtonCrud synch" v-if="showEditableButton(record.key)"> {{this.buttonText}} </button>
                    <template #content="{close}">
                        <div class="popperOptions">
                            <li v-for="options in this.optionsToEdit" :key="options" class="popperOptionsList" v-on:click="this.emitOption(options.method), close();">
                                {{$filters.translate(options.title)}}
                            </li>
                        </div>
                    </template>
                </Popper>
            </div>
        </template>
    </a-table>
</template>
<script>

import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';

export default {
    name: 'TableEditable',
    props: {
        editableCells: Array,
        tableData: Object,
        buttonText: String,
        optionsToEdit: Array
    },
    emits: ['change', 'editRow', 'editColumn', 'editAllCells'],
    components: {
        CheckOutlined,
        EditOutlined
    },
    data(){
        return {
            editableData: {},
            selectedRow: '',
            selectedColumn: '',
            valueSaved: ''
        }
    },
    methods: {
        edit(row, column) {
            this.editableData[row + '|' + column] = this.tableData.data.filter((item) => row === item.key)[0][column];
        },
        save(row, column) {
            let data = {...this.tableData.data};
            if (this.editableData[row + '|' + column] == '') {
                data[row][column] = '0'
            } else {
                data[row][column] = this.editableData[row + '|' + column];
                this.valueSaved = data[row][column]
            }
            delete this.editableData[row + '|' + column];
            this.selectedRow = row;
            this.selectedColumn = column;
            this.$emit('change', data);
        },
        showEditableButton(row) {
            if (this.selectedRow == row) {
                return true
            }
        },
        emitOption(method) {
            this.$emit(method, this.selectedRow, this.selectedColumn, this.valueSaved);
        },
    },
}
</script>
<style>

Thanks in advance. If this question is not clear enough please let me know so I can edit it.