Repeat the same behaviour on Ant Design Editable Table for React on Ant Design Vue 3?

I’m using Ant Design in Vue 3 and I have a table that I’m able to edit all the cells. The problem is: I want to automatically close the editable cell if the user opens a new one to edit. While I was researching, I noticed that this behaviour happens on Ant Design for React accordingly to the documentation.

My question is, how to do this for Vue 3? On their documentation for Vue, the Ant Design table doesn’t show this behaviour that I wanted and I have no idea how to do that. Thanks in advance. 🙂

This is how my code looks now:

<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" :ref="(record.key, column.key)">
                <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,
        copyOptionsTable: Boolean
    },
    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);
            if (this.copyOptionsTable) {
                this.addClass();
                this.editedCell();
            }
        },
        showEditableButton(row) {
            if (this.copyOptionsTable && this.selectedRow == row) {
                return true
            }
        },
        emitOption(method) {
            this.$emit(method, this.selectedRow, this.selectedColumn, this.valueSaved);
        },
        addClass() {
            let columnsHTML = [...document.querySelectorAll('.ant-table-thead > tr > th')];
            let columnsData = this.tableData.columns;
            for (let idx in columnsHTML) {
                columnsHTML[idx].classList.add(columnsData[idx].dataIndex);
            }                
        },
        editedCell() {
            this.removeCell();
            let tableRow = [...document.querySelectorAll('.ant-table-tbody > tr > td')];
            let cellRef = this.$refs[this.selectedColumn];
            cellRef.classList.add('editedCell');
            for (let cell in tableRow) {
                let div = tableRow[cell].querySelector('div')
                if (div.classList.contains('editedCell')) {
                    tableRow[cell].classList.add('selectedCell')
                }
            }
        },
        removeCell(){
            let tableRow = [...document.querySelectorAll('.ant-table-tbody > tr > td')];
            for (let cell in tableRow) {
                tableRow[cell].classList.remove('selectedCell')
                let cellDiv = tableRow[cell].querySelector('div');
                cellDiv.classList.remove('editedCell');

            }
        }
    },
}
</script>

Answer

It was simpler than I thought it would be. Just changed the edit method to this and now it’s working 🙂

    edit(row, column) {
        for (let idx in this.editableData) {
            delete this.editableData[idx];
        }
        this.editableData[row + '|' + column] = this.tableData.data.filter((item) => row === item.key)[0][column];
    },