当我尝试删除字符串并且字符串在Ant Design Vue表上的长度为1时，输入关闭 [英] Input closes when I try to delete the string and the string has the length 1 on Ant Design Vue Table

问题描述

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

在这个可编辑的表上，我可以编辑我想要的所有内容，当字符串长度超过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)时，这种情况不会发生。但所有其他例子都会发生这种情况。我不确定这是否与编辑/筛选功能或其他功能有关

提前谢谢！

推荐答案

我相信您看到的问题是由于js中类型强制的工作方式造成的

如果您有if(val == false)或只有if(val)，它将更改变量的类型，并且由于"" == false，如果值为空字符串，则此语句将被视为False：v-if="editableData[record.key + '|' + column.key]"

因为存储方法中的删除命令将删除键值，所以可以对undefined执行类型严格比较：

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

这篇关于当我尝试删除字符串并且字符串在Ant Design Vue表上的长度为1时，输入关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！