当我尝试删除字符串并且该字符串在 Ant Design Vue 上的长度为 1 时输入关闭 Table

Question

当我尝试删除输入中的内容并且内容的长度为 1 时，输入关闭，我不知道为什么。我在尝试弄清楚为什么会发生这种情况时遇到了一些麻烦。

在这个 editable table 我可以编辑我想要的一切，当字符串长于 1 时，这不会发生。我做错了什么？

现在这是我的代码：

<template>
     <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false" class="tableEditable">
        <template #title>
            <div class="formLayoutCrud">
                <p>{{this.title}}</p>
                <input-multiple-button :name="'buttonOptions'" :value="'percentage'" :options="this.buttonOptions"> </input-multiple-button>
            </div>
        </template>
        <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]" 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="save(record.key, column.key)" />
                </div>
                <div v-else class="editable-cell-text-wrapper">
                    {{ text || ' ' }}
                    <edit-outlined class="editable-cell-icon" @click="edit(record.key, column.key)" />
                </div>
            </div>
        </template>
    </a-table>
</template>
<script>
import { reactive, ref } from 'vue';
import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';

import InputMultipleButton from '@/components/crudForm/InputMultipleButton.vue';

export default {
    name: 'TableEditable',
    props: {
        title: String,
        buttonOptions: Array,
        editableCells: Array,
        dataSrc: Array
    },
    components: {
        CheckOutlined,
        EditOutlined,
        InputMultipleButton
    },
    setup() {
        const columns = [
            {
                title: 'Mon',
                dataIndex: 'monday',
                slots: {
                    customRender: 'monday',
                },
            },
            {
                title: 'Tue',
                dataIndex: 'tuesday',
                slots: {
                    customRender: 'tuesday',
                },
            },
            {
                title: 'Wed',
                dataIndex: 'wednesday',
                slots: {
                    customRender: 'wednesday',
                },
            },
            {
                title: 'Thr',
                dataIndex: 'thursday',
                slots: {
                    customRender: 'thursday',
                },
            },
            {
                title: 'Fri',
                dataIndex: 'friday',
                slots: {
                    customRender: 'friday',
                },
            },
            {
                title: 'Sat',
                dataIndex: 'saturday',
                slots: {
                    customRender: 'saturday',
                },
            },
            {
                title: 'Sun',
                dataIndex: 'sunday',
                slots: {
                    customRender: 'sunday',
                },
            },
        ];
        const dataSource = ref([
            {
                key: '0',
                monday: '0',
                tuesday: '0',
                wednesday: '0',
                thursday: '0',
                friday: '0',
                saturday: '9',
                sunday: '10'

            }
            ]);

            
        const editableData = reactive({});

        const edit = (row, column) => {
            console.log(editableData)
            editableData[row + '|' + column] = dataSource.value.filter((item) => row === item.key)[0][column];
        };

        const save = (row, column) => {
            dataSource.value[row][column] = editableData[row + '|' + column];
            delete editableData[row + '|' + column];
            };

        return {
            columns,
            dataSource,
            editableData,
            edit,
            save
        };
  },
}
</script>

例如：当我编辑星期日选项 (10) 时，不会发生这种情况。但它发生在所有其他例子中。我不确定它是否与 edit/filter 功能或其他

相关

提前致谢！

Answer 1

我认为您遇到的问题是由于类型强制在 js 中的工作方式造成的

如果你有一个 if(val == false) 或者只有 if(val) 它会改变变量的类型，并且因为 "" == false，如果值是一个空字符串：v-if="editableData[record.key + '|' + column.key]"

因为保存方法中的删除命令会删除键值，所以您可以 type-strict 与 undefined 进行比较，如下所示：

<div
  v-if="editableData[record.key + '|' + column.key] !== undefined"
  class="editable-cell-input-wrapper"
>