EditableCell组件页面
<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 {
name: 'EditableCell',
props: {
text: [String, Number, null],
},
watch: {
text(newV, oldV) {
this.$set(this, 'value', newV)
},
},
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>
table表格页面
<template>
<a-table> // 一些属性table的操作和属性已忽略
<template slot="aaaa" slot-scope="text,">
<editable-cell :text="text" @change="onCellChange($event, record, 'materialDesc')"/>
</template>
</a-table>
</template>
<script>
import EditableCell from './components/EditableCell'
export default {
components:{ EditableCell }
methods:{
onCellChange(value,record,dataIndex){
console.log(value)
console.log(record)
console.log(dataIndex)
}
}
}
</script>