When I try to delete the content in the input and the length of the content is 1, the input closes and I have no idea why. I'm having some trouble trying to figure it out why this is happening.

On this editable table I'm able to edit everything that I wanted, and when the string is longer than 1 this doesn't happen. What am I doing wrong?

This is my code now:

<template>
     <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false" >
        <template #title>
            <div >
                <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 >
                <div v-if="editableData[record.key   '|'   column.key]" >
                    <a-input v-model:value="editableData[record.key   '|'   column.key]" @pressEnter="save(record.key, column.key)" type="number" />
                    <check-outlined  @click="save(record.key, column.key)" />
                </div>
                <div v-else >
                    {{ text || ' ' }}
                    <edit-outlined  @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>

For example: When I edit the Sunday option (10), this doesn't happen. But it happens to all of the other examples. I'm not sure if it's related to the edit/filter function or something else

Thanks in advance!

CodePudding user response：

I believe the issue you're seeing is due to the way type coercion works in js

if you have a if(val == false) or just if(val) it will change the type of the variable, and because "" == false, this statement will be treated as falsy if the value is an empty string: v-if="editableData[record.key '|' column.key]"

Because your delete command in the save method will remove the key value, you can do a type-strict compare against undefined like this:

<div
  v-if="editableData[record.key   '|'   column.key] !== undefined"
  
>