0

当我尝试删除输入中的内容并且内容的长度为 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) 时，这不会发生。但它发生在所有其他示例中。我不确定它是否与编辑/过滤功能或其他有关

提前致谢！

4

1 回答 1

0

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

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

因为您在 save 方法中的删除命令将删除键值，所以您可以undefined像这样进行类型严格比较：

<div
  v-if="editableData[record.key + '|' + column.key] !== undefined"
  class="editable-cell-input-wrapper"
>
于 2022-02-09T16:07:07.417 回答