Ant 表格行编辑 VUE
程序员文章站
2022-06-07 22:10:28
...
Ant 表格行编辑 VUE
<template>
<a-table :columns="columns" :data-source="data" bordered>
<template
v-for="col in ['keyJA', 'valueJA']"
:slot="col"
slot-scope="text, record, index"
>
<div :key="col">
<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>
<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 :disabled="editingKey !== ''" @click="() => edit(record.key)">Edit</a>
</span>
</div>
</template>
</a-table>
</template>
<script>
const columns = [
{
title: '属性(中文)',
key: 'keyCN',
align: 'center',
width: '20%',
dataIndex: 'keyCN'
},
{
title: '属性(日文)',
align: 'center',
dataIndex: 'keyJA',
width: '20%',
key: 'keyJA',
scopedSlots: { customRender: 'keyJA' }
},
{
title: '属性值(中文)',
key: 'valueCN',
width: '20%',
align: 'center',
dataIndex: 'valueCN',
scopedSlots: { customRender: 'valueCN' }
},
{
title: '属性值(日文)',
width: '20%',
key: 'valueJA',
align: 'center',
dataIndex: 'valueJA',
scopedSlots: { customRender: 'valueJA' }
},
{
title: '操作',
width: '20%',
key: 'action',
align: 'center',
scopedSlots: { customRender: 'action' }
}
];
const data = [
{
id: 1,
keyCN: '颜色',
keyJA: 'XXXX',
valueCN: '红色',
valueJA: 'XXXX'
},
{
id: 2,
keyCN: '颜色',
keyJA: 'XXXX',
valueCN: '红色',
valueJA: 'XXXX'
},
{
id: 3,
keyCN: '颜色',
keyJA: 'XXXX',
valueCN: '红色',
valueJA: 'XXXX'
}
]
export default {
data() {
this.cacheData = data.map(item => ({ ...item }));
return {
data,
columns,
editingKey: '',
};
},
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];
this.editingKey = key;
if (target) {
target.editable = true;
this.data = newData;
}
},
save(key) {
const newData = [...this.data];
const newCacheData = [...this.cacheData];
const target = newData.filter(item => key === item.key)[0];
const targetCache = newCacheData.filter(item => key === item.key)[0];
if (target && targetCache) {
delete target.editable;
this.data = newData;
Object.assign(targetCache, target);
this.cacheData = newCacheData;
}
this.editingKey = '';
},
cancel(key) {
const newData = [...this.data];
const target = newData.filter(item => key === item.key)[0];
this.editingKey = '';
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>
效果图: