在 Ant 上重复相同的行为 在 Ant Design Vue 3 上为 React 设计可编辑表？

Question

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 1

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];
    },