<template> <div class="editable-cell"> <div v-if="editable" class="editable-cell-input-wrapper"> <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon type="check" class="editable-cell-icon-check" @click="check" /> </div> <div v-else class="editable-cell-text-wrapper"> {{ value || ' ' }} <a-icon type="edit" class="editable-cell-icon" @click="edit" /> </div> </div> </template> <script> export default { props: { text: String, }, data() { return { value: this.text, editable: false, }; }, methods: { handleChange(e) { const value = e.target.value; this.value = value; }, check() { this.editable = false; this.$emit('change', this.value); }, edit() { this.editable = true; }, }, }; </script>