效果图:
<template>
<div>
<a-button class="editable-add-btn" @click="handleAdd">
Add
</a-button>
<div>
<a-table :columns="columns" :data-source="data" bordered :rowKey="(record,index)=>{return index}">
<template
v-for="col in ['Key', 'value', 'desc']"
:slot="col"
slot-scope="text, record, index"
>
<div :key="col" >
<a-input
v-if="canedit"
style="margin: -5px 0"
:value="text"
@change="e => handleChange(e.target.value, index, col,record)"
/>
<template v-else>
{{ text }}
</template>
</div>
</template>
<template slot="operation" slot-scope="text, record, index">
<a-popconfirm
v-if="data.length"
title="Sure to delete?"
@confirm="() => onDelete(index,record)"
>
<a href="javascript:;">Delete</a>
</a-popconfirm>
</template>
</a-table>
</div>
</div>
</template>
<script>
const columns = [
{
title: 'Key',
dataIndex: 'Key',
width: '25%',
scopedSlots: { customRender: 'Key' },
},
{
title: 'value',
dataIndex: 'value',
width: '25%',
scopedSlots: { customRender: 'value' },
},
{
title: 'desc',
dataIndex: 'desc',
width: '30%',
scopedSlots: { customRender: 'desc' },
},
{
title: 'operation',
dataIndex: 'operation',
scopedSlots: { customRender: 'operation' },
},
];
const data = [];
for (let i = 0; i < 5; i++) {
data.push({
Key: `key ${i}`,
value: i,
desc: `London Park no. ${i}`,
});
}
export default {
data() {
this.cacheData = data.map(item => ({ ...item }));
return {
canedit:true,
data,
columns,
editingKey: '',
};
},
methods: {
handleChange(value, index, column,record) {
console.log(value)
record[column]=value
let newitem= record
console.log(newitem)
this.data.splice(index, 1, newitem)
},
onDelete(index){
this.data.splice(index,1)
},
handleAdd() {
console.log(this.data.length)
const newData = {
Key: '22',
value: 32,
desc: `London, Park Lane no `,
};
this.data = [...this.data, newData];
},
},
};
</script>
<style scoped>
.editable-row-operations a {
margin-right: 8px;
}
.editable-add-btn {
margin-bottom: 8px;
}
</style>