49 lines
944 B
Vue
49 lines
944 B
Vue
<template>
|
|
<div class="editable-cell">
|
|
<div v-if="editable" class="editable-cell-input-wrapper">
|
|
<a-input ref="myInput" :value="value" @change="handleChange" @blur="handleBlur" />
|
|
</div>
|
|
<div v-else class="editable-cell-text-wrapper" @dblclick="handleCellClick">
|
|
{{ value || ' ' }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
text: Number,
|
|
},
|
|
data() {
|
|
return {
|
|
value: this.text,
|
|
editable: false,
|
|
}
|
|
},
|
|
methods: {
|
|
handleCellClick() {
|
|
this.editable = true
|
|
this.$nextTick(() => {
|
|
this.$refs.myInput.focus()
|
|
})
|
|
},
|
|
handleChange(e) {
|
|
this.value = e.target.value
|
|
},
|
|
handleBlur() {
|
|
this.editable = false
|
|
this.$emit('change', this.value)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
/deep/.ant-input {
|
|
padding: 0;
|
|
}
|
|
.editable-cell-text-wrapper {
|
|
min-height: 32px;
|
|
line-height: 32px;
|
|
}
|
|
</style> |