ant-design-vue/components/table/demo/edit-row.md

124 lines
2.9 KiB
Markdown
Raw Normal View History

2018-04-02 18:35:35 +08:00
<cn>
#### 可编辑行
带行编辑功能的表格。
</cn>
<us>
#### Editable Rows
Table with editable rows.
</us>
```html
<template>
<a-table :columns="columns" :dataSource="data" bordered>
2018-04-03 14:34:54 +08:00
<template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record, index">
<div>
<a-input
v-if="record.editable"
style="margin: -5px 0"
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>{{text}}</template>
</div>
</template>
2018-04-02 18:35:35 +08:00
<template slot="operation" slot-scope="text, record, index">
<div class='editable-row-operations'>
<span v-if="record.editable">
<a @click="() => save(record.key)">Save</a>
<a-popconfirm title='Sure to cancel?' @confirm="() => cancel(record.key)">
<a>Cancel</a>
</a-popconfirm>
</span>
<span v-else>
<a @click="() => edit(record.key)">Edit</a>
</span>
</div>
</template>
</a-table>
</template>
<script>
const columns = [{
title: 'name',
dataIndex: 'name',
width: '25%',
scopedSlots: { customRender: 'name' },
}, {
title: 'age',
dataIndex: 'age',
width: '15%',
scopedSlots: { customRender: 'age' },
}, {
title: 'address',
dataIndex: 'address',
width: '40%',
scopedSlots: { customRender: 'address' },
}, {
title: 'operation',
dataIndex: 'operation',
scopedSlots: { customRender: 'operation' },
}]
const data = []
for (let i = 0; i < 100; i++) {
data.push({
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
})
}
export default {
data () {
this.cacheData = data.map(item => ({ ...item }))
return {
data,
columns,
}
},
methods: {
handleChange (value, key, column) {
const newData = [...this.data]
const target = newData.filter(item => key === item.key)[0]
if (target) {
target[column] = value
this.data = newData
}
},
edit (key) {
const newData = [...this.data]
const target = newData.filter(item => key === item.key)[0]
if (target) {
target.editable = true
this.data = newData
}
},
save (key) {
const newData = [...this.data]
const target = newData.filter(item => key === item.key)[0]
if (target) {
delete target.editable
this.data = newData
this.cacheData = newData.map(item => ({ ...item }))
}
},
cancel (key) {
const newData = [...this.data]
const target = newData.filter(item => key === item.key)[0]
if (target) {
Object.assign(target, this.cacheData.filter(item => key === item.key)[0])
delete target.editable
this.data = newData
}
},
},
}
</script>
<style scoped>
.editable-row-operations a {
margin-right: 8px;
}
</style>
```