在 Ant 上重復相同的行為 在 Ant Design Vue 3 上為 React 設計可編輯表？

Question

我在 Vue 3 中使用 Ant Design，我有一個表格，我可以編輯所有單元格。 問題是：如果用戶打開一個新單元格進行編輯，我想自動關閉可編輯單元格。 在我進行研究時，我注意到根據文檔，這種行為發生在 Ant Design for React 上。

我的問題是，如何為 Vue 3 執行此操作？ 在他們的 Vue 文檔中，Ant 設計表沒有顯示我想要的這種行為，我不知道該怎么做。 提前致謝。 :)

這就是我的代碼現在的樣子：

<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

它比我想象的要簡單。 剛剛將編輯方法更改為此，現在可以使用了:)

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