在 Ant Design Vue 3 上为 React 在 Ant Design Editable Table 上重复相同的行为？

Question

我在 Vue 3 中使用 Ant Design，我有一个 table 可以编辑所有单元格。问题是：如果用户打开一个新单元格进行编辑，我想自动关闭editable 单元格。在我研究的过程中，我注意到这种行为发生在 Ant Design for React 上，对应于 documentation.

我的问题是，如何为 Vue 3 执行此操作？在他们的 Vue 文档中，Ant Design table 没有显示我想要的这种行为，我也不知道该怎么做。提前致谢。 :)

这是我的代码现在的样子：

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

在 Ant Design Vue 3 上为 React 在 Ant Design Editable Table 上重复相同的行为？

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

javascript

vue.js

antd

vuejs3

ant-design-vue