45 lines
863 B
Vue
45 lines
863 B
Vue
|
<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>
|